/* ==================================================
   جاي بالغلط — الجزيئات واللمعات المتحركة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box {
    position: relative !important;
    isolation: isolate !important;
}

/* نقاط ولمعات صغيرة */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box::before {
    content: "" !important;

    position: fixed !important;
    z-index: -1 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 226, 104, 0.88) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(91, 209, 255, 0.75) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(198, 128, 255, 0.70) 0 1.5px,
            transparent 2.5px
        ),
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.52) 0 1px,
            transparent 2px
        ) !important;

    background-size:
        190px 170px,
        230px 210px,
        160px 240px,
        120px 135px !important;

    background-position:
        22px 35px,
        80px 120px,
        45px 70px,
        10px 15px !important;

    opacity: 0.62 !important;

    animation:
        pgHexOddParticlesMove
        18s linear infinite !important;

    pointer-events: none !important;
}

@keyframes pgHexOddParticlesMove {
    0% {
        background-position:
            22px 35px,
            80px 120px,
            45px 70px,
            10px 15px;

        opacity: 0.45;

        filter:
            brightness(0.9)
            drop-shadow(0 0 2px rgba(102, 211, 255, 0.45));
    }

    25% {
        opacity: 0.95;

        filter:
            brightness(1.8)
            drop-shadow(0 0 7px rgba(255, 226, 104, 0.95));
    }

    50% {
        opacity: 0.58;

        filter:
            brightness(1.15)
            drop-shadow(0 0 3px rgba(198, 128, 255, 0.65));
    }

    75% {
        opacity: 1;

        filter:
            brightness(2)
            drop-shadow(0 0 8px rgba(91, 209, 255, 1));
    }

    100% {
        background-position:
            212px 205px,
            -150px 330px,
            205px -170px,
            130px 150px;

        opacity: 0.45;

        filter:
            brightness(0.9)
            drop-shadow(0 0 2px rgba(102, 211, 255, 0.45));
    }
}

/* دوائر ضوئية وزخارف هندسية */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box::after {
    content: "" !important;

    position: fixed !important;
    z-index: -1 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    background:
        /* دائرة سماوية أعلى اليمين */
        radial-gradient(
            circle at 91% 12%,
            transparent 0 48px,
            rgba(72, 205, 255, 0.20) 49px 51px,
            transparent 52px
        ),

        /* دائرة بنفسجية أسفل اليسار */
        radial-gradient(
            circle at 7% 88%,
            transparent 0 72px,
            rgba(176, 93, 255, 0.18) 73px 76px,
            transparent 77px
        ),

        /* دائرة ذهبية صغيرة */
        radial-gradient(
            circle at 25% 19%,
            transparent 0 27px,
            rgba(255, 203, 77, 0.19) 28px 30px,
            transparent 31px
        ),

        /* دائرة مزدوجة يمين الوسط */
        radial-gradient(
            circle at 96% 54%,
            transparent 0 92px,
            rgba(67, 196, 255, 0.10) 93px 95px,
            transparent 96px 111px,
            rgba(162, 91, 255, 0.10) 112px 114px,
            transparent 115px
        ) !important;

    animation:
        pgHexOddRingsFloat
        12s ease-in-out
        infinite alternate !important;

    pointer-events: none !important;
}

@keyframes pgHexOddRingsFloat {
    from {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    to {
        transform:
            translate(-18px, 14px)
            rotate(3deg);
    }
}

/* إبقاء محتوى الفئة فوق الجزيئات */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box > * {
    position: relative !important;
    z-index: 4 !important;
}

/* ==================================================
   جاي بالغلط — خلفية مسرح مسابقات حديث
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    isolation: isolate !important;

    background-color: #03091e !important;

    background-image:
        /* زخرفة السداسيات */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='128' viewBox='0 0 60 64'%3E%3Cpath d='M30 2 L56 17 L56 47 L30 62 L4 47 L4 17 Z' fill='none' stroke='%236fc8ff' stroke-opacity='0.14' stroke-width='1.3'/%3E%3C/svg%3E"),

        /* إضاءة برتقالية خلف العنوان */
        radial-gradient(
            circle at 50% 5%,
            rgba(255, 133, 50, 0.25) 0%,
            transparent 26%
        ),

        /* إضاءة سماوية يسار */
        radial-gradient(
            circle at 8% 27%,
            rgba(28, 197, 255, 0.30) 0%,
            transparent 31%
        ),

        /* إضاءة بنفسجية يمين */
        radial-gradient(
            circle at 91% 72%,
            rgba(157, 70, 255, 0.32) 0%,
            transparent 34%
        ),

        /* اللون الأساسي */
        linear-gradient(
            145deg,
            #02081c 0%,
            #07183f 34%,
            #24105b 72%,
            #05091f 100%
        ) !important;

    background-size:
        120px 128px,
        auto,
        auto,
        auto,
        auto !important;

    animation:
        pgHexOddBackgroundDrift
        22s linear infinite !important;
}

/* تحريك زخرفة السداسيات ببطء */

@keyframes pgHexOddBackgroundDrift {
    from {
        background-position:
            0 0,
            center,
            center,
            center,
            center;
    }

    to {
        background-position:
            120px 128px,
            center,
            center,
            center,
            center;
    }
}

/* ==================================================
   أشعة الضوء المائلة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode::before {
    content: "" !important;

    position: absolute !important;
    z-index: 0 !important;

    inset: -30% -20% !important;

    width: auto !important;
    height: auto !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 21%,
            rgba(55, 205, 255, 0.09) 27%,
            rgba(55, 205, 255, 0.22) 31%,
            rgba(55, 205, 255, 0.05) 36%,
            transparent 42%,
            transparent 100%
        ),
        linear-gradient(
            68deg,
            transparent 0%,
            transparent 58%,
            rgba(173, 84, 255, 0.07) 63%,
            rgba(173, 84, 255, 0.20) 67%,
            rgba(173, 84, 255, 0.05) 72%,
            transparent 78%
        ) !important;

    filter: blur(3px) !important;

    transform: none;

    animation:
        pgHexOddLightRays
        9s ease-in-out
        infinite alternate !important;

    pointer-events: none !important;
}

@keyframes pgHexOddLightRays {
    from {
        transform:
            translateX(-3%)
            rotate(-1deg);
        opacity: 0.72;
    }

    to {
        transform:
            translateX(4%)
            rotate(1deg);
        opacity: 1;
    }
}

/* ==================================================
   كرات الإضاءة المتحركة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode::after {
    content: "" !important;

    position: absolute !important;
    z-index: 0 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 0 !important;

    background:
        radial-gradient(
            circle at 17% 75%,
            rgba(35, 211, 255, 0.24) 0%,
            rgba(35, 211, 255, 0.08) 8%,
            transparent 18%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(166, 82, 255, 0.24) 0%,
            rgba(166, 82, 255, 0.08) 9%,
            transparent 20%
        ),
        radial-gradient(
            circle at 62% 88%,
            rgba(255, 145, 55, 0.17) 0%,
            transparent 15%
        ) !important;

    filter: blur(7px) !important;

    animation:
        pgHexOddFloatingLights
        10s ease-in-out
        infinite alternate !important;

    pointer-events: none !important;
}

@keyframes pgHexOddFloatingLights {
    from {
        transform:
            translate(-2%, 1%)
            scale(1);
    }

    to {
        transform:
            translate(3%, -2%)
            scale(1.08);
    }
}

/* ==================================================
   جعل البطاقة شفافة لإظهار الخلفية
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    position: relative !important;
    z-index: 2 !important;

    background:
        linear-gradient(
            145deg,
            rgba(3, 12, 39, 0.30),
            rgba(25, 14, 70, 0.28)
        ) !important;

    backdrop-filter:
        blur(1px) !important;

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.07) !important;
}

/* جميع عناصر السؤال فوق الخلفية */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 3;
}

/* إيقاف الحركة لمن يفضل تقليل المؤثرات */

@media (prefers-reduced-motion: reduce) {
    html body
    #pg-hex-question-overlay.pg-hex-odd-one-out-mode,

    html body
    #pg-hex-question-overlay.pg-hex-odd-one-out-mode::before,

    html body
    #pg-hex-question-overlay.pg-hex-odd-one-out-mode::after {
        animation: none !important;
    }
}

/* ==================================================
   إصلاح تقسيم صفحة إجابة جاي بالغلط
   ================================================== */

/* خلفية حمراء يسارًا وخضراء يمينًا */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
div.pg-hex-odd-one-out-words.pg-hex-odd-answer-mode {
    background:
        linear-gradient(
            90deg,
            rgba(213, 28, 61, 0.21) 0%,
            rgba(213, 28, 61, 0.10) 36.7%,
            rgba(255, 255, 255, 0.28) 36.8%,
            rgba(255, 255, 255, 0.28) 37.1%,
            rgba(20, 185, 91, 0.10) 37.2%,
            rgba(20, 185, 91, 0.21) 100%
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #03112f,
            #071d48
        ) !important;

    background-size:
        auto,
        32px 32px,
        32px 32px,
        auto !important;
}

/* عنوان الكلمة الدخيلة */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
div.pg-hex-odd-one-out-words.pg-hex-odd-answer-mode::before {
    content: "الكلمة الدخيلة" !important;

    position: absolute !important;
    z-index: 50 !important;

    top: 14px !important;
    left: 8% !important;
    right: auto !important;
    bottom: auto !important;

    width: 220px !important;
    height: auto !important;

    padding: 7px 14px !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #f14961,
            #ae1537
        ) !important;

    border: 2px solid #ff9dac !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 0 #710a20,
        0 0 19px rgba(255, 53, 82, 0.4) !important;

    filter: none !important;
    transform: none !important;

    pointer-events: none !important;
}

/* عنوان المجموعة المتشابهة */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
div.pg-hex-odd-one-out-words.pg-hex-odd-answer-mode::after {
    content: "المجموعة المتشابهة" !important;

    position: absolute !important;
    z-index: 50 !important;

    top: 14px !important;
    right: 18% !important;
    left: auto !important;
    bottom: auto !important;

    width: 250px !important;
    height: auto !important;

    padding: 7px 14px !important;
    box-sizing: border-box !important;

    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #3bd77d,
            #098743
        ) !important;

    border: 2px solid #9affc4 !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 0 #075d2c,
        0 0 19px rgba(47, 220, 121, 0.34) !important;

    filter: none !important;
    transform: none !important;

    pointer-events: none !important;
}

/* إنزال الكلمات الخضراء حتى لا تغطي عنوان المجموعة */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-answer-mode
.pg-hex-odd-similar {
    top:
        calc(
            21% +
            var(--pg-odd-row) *
            27%
        ) !important;
}

/* إبقاء الكلمة الدخيلة أسفل عنوانها */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-answer-mode
.pg-hex-odd-different {
    top: 45% !important;
}
/* ==================================================
   صندوق الإجابة والتحكيم — جاي بالغلط
   ================================================== */

/* ظهور صندوق الإجابة بحركة ناعمة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    top: -90px !important;
    overflow: hidden !important;

    width: min(680px, 86%) !important;
    min-height: 48px !important;

    margin: 6px auto 4px !important;
    padding: 7px 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17, 101, 139, 0.92),
            rgba(12, 53, 111, 0.94)
        ) !important;

    border: 2px solid #42e28b !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 0 #063868,
        0 10px 20px rgba(0, 0, 0, 0.27),
        0 0 20px rgba(55, 222, 137, 0.18),
        inset 0 1px 0
            rgba(255, 255, 255, 0.2) !important;

    animation:
        pgHexOddAnswerEnter
        0.48s cubic-bezier(
            0.2,
            0.85,
            0.3,
            1.15
        ) both !important;
}

@keyframes pgHexOddAnswerEnter {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* لمعة خفيفة داخل صندوق الإجابة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden)::before {
    content: "";

    position: absolute;

    top: -40%;
    left: -30%;

    width: 30%;
    height: 180%;

    transform:
        rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    animation:
        pgHexOddAnswerShine
        2.8s ease-in-out
        infinite;

    pointer-events: none;
}

@keyframes pgHexOddAnswerShine {
    0% {
        left: -35%;
    }

    55%,
    100% {
        left: 120%;
    }
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area span {
    color: #75ffb0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-answer-text {
    position: relative;
    z-index: 2;

    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

/* أزرار التحكيم */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;

    margin: 7px auto 5px !important;

    animation:
        pgHexOddButtonsEnter
        0.5s ease 0.12s both !important;
}

@keyframes pgHexOddButtonsEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons button {
    min-width: 260px !important;
    min-height: 52px !important;

    padding: 9px 22px !important;

    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    border:
        2px solid
        rgba(255, 255, 255, 0.65) !important;

    border-radius: 14px !important;

    cursor: pointer !important;

    transition:
        transform 0.16s ease,
        filter 0.16s ease,
        box-shadow 0.16s ease !important;
}

/* زر الإجابة الصحيحة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-correct-button {
    background:
        linear-gradient(
            180deg,
            #35df7d,
            #0dac4f
        ) !important;

    box-shadow:
        0 7px 0 #06752f,
        0 12px 19px rgba(0, 0, 0, 0.28),
        0 0 17px rgba(42, 222, 120, 0.22) !important;
}

/* زر الإجابة الخاطئة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-wrong-button {
    background:
        linear-gradient(
            180deg,
            #ff5066,
            #d51c39
        ) !important;

    box-shadow:
        0 7px 0 #8d1028,
        0 12px 19px rgba(0, 0, 0, 0.28),
        0 0 17px rgba(255, 55, 82, 0.22) !important;
}

/* المرور بالمؤشر */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons button:hover {
    transform:
        translateY(-3px)
        scale(1.025) !important;

    filter: brightness(1.09) !important;
}

/* الضغط */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons button:active {
    transform:
        translateY(5px)
        scale(0.99) !important;

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45) !important;
}
/* ==================================================
   عنوان جاي بالغلط الحديث
   ================================================== */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-title {
    position: relative;

    width: fit-content !important;
    min-height: 0 !important;

    margin: 4px auto 12px !important;
    padding: 9px 30px !important;

    color: #fff1a0 !important;
    font-size: clamp(25px, 2.5vw, 36px) !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            145deg,
            rgba(107, 58, 195, 0.88),
            rgba(45, 30, 115, 0.92)
        ) !important;

    border:
        2px solid
        rgba(220, 184, 255, 0.78) !important;

    border-radius: 18px !important;

    box-shadow:
        0 7px 0 #26145f,
        0 12px 25px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(145, 81, 255, 0.25),
        inset 0 1px 0
            rgba(255, 255, 255, 0.22) !important;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 222, 98, 0.32) !important;
}

/* خط ضوئي خلف العنوان */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-title::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 50%;
    left: 50%;

    width: min(760px, 72vw);
    height: 2px;

    transform: translate(-50%, -50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100, 193, 255, 0.65),
            rgba(194, 124, 255, 0.8),
            rgba(100, 193, 255, 0.65),
            transparent
        );

    box-shadow:
        0 0 16px rgba(112, 185, 255, 0.6);

    pointer-events: none;
}

/* الجملة التوضيحية تحت العنوان */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-instruction {
    width: fit-content !important;
    min-width: 390px !important;

    margin: 0 auto 10px !important;
    padding: 7px 24px !important;

    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;

    background:
        linear-gradient(
            145deg,
            rgba(13, 91, 157, 0.7),
            rgba(22, 48, 115, 0.76)
        ) !important;

    border:
        1px solid
        rgba(102, 205, 255, 0.72) !important;

    border-radius: 999px !important;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0
            rgba(255, 255, 255, 0.14) !important;
}
/* ==================================================
   جاي بالغلط — الخلفية والمنصة الحديثة
   ================================================== */

/* خلفية الشاشة كاملة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(37, 204, 255, 0.24) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 86% 82%,
            rgba(151, 71, 255, 0.27) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 73% 12%,
            rgba(255, 111, 58, 0.11) 0%,
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #02091d 0%,
            #07163b 38%,
            #161047 70%,
            #05091d 100%
        ) !important;
}

/* إضاءة سماوية ناعمة متحركة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -170px;
    left: -130px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(36, 202, 255, 0.24),
            rgba(36, 202, 255, 0)
                68%
        );

    filter: blur(10px);

    animation:
        pgHexOddBlueLight
        8s ease-in-out
        infinite alternate;

    pointer-events: none;
}

/* إضاءة بنفسجية ناعمة متحركة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -130px;
    bottom: -190px;

    width: 580px;
    height: 580px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(155, 75, 255, 0.28),
            rgba(155, 75, 255, 0)
                68%
        );

    filter: blur(12px);

    animation:
        pgHexOddPurpleLight
        9s ease-in-out
        infinite alternate;

    pointer-events: none;
}

@keyframes pgHexOddBlueLight {
    from {
        transform:
            translate(0, 0)
            scale(1);
    }

    to {
        transform:
            translate(110px, 75px)
            scale(1.18);
    }
}

@keyframes pgHexOddPurpleLight {
    from {
        transform:
            translate(0, 0)
            scale(1);
    }

    to {
        transform:
            translate(-120px, -80px)
            scale(1.16);
    }
}

/* إزالة الخلفية الزرقاء المسطحة من البطاقة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    position: relative !important;
    z-index: 1 !important;

    background:
        linear-gradient(
            145deg,
            rgba(5, 17, 49, 0.72),
            rgba(18, 15, 65, 0.68)
        ) !important;

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.08) !important;
}

/* منصة حركة الكلمات */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words {
    position: relative !important;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% 45%,
            rgba(36, 142, 226, 0.18),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(3, 15, 43, 0.93),
            rgba(11, 27, 71, 0.91)
        ) !important;

    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto !important;

    border:
        2px solid
        rgba(86, 191, 255, 0.72) !important;

    border-radius: 25px !important;

    box-shadow:
        inset 0 0 45px
            rgba(0, 0, 0, 0.48),
        inset 0 1px 0
            rgba(255, 255, 255, 0.12),
        0 0 0 5px
            rgba(45, 144, 233, 0.07),
        0 16px 38px
            rgba(0, 0, 0, 0.38),
        0 0 28px
            rgba(48, 172, 255, 0.16) !important;
}

/* خط إضاءة علوي داخل المنصة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    left: 13%;

    width: 74%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 212, 255, 0.9),
            transparent
        );

    box-shadow:
        0 0 16px
            rgba(69, 196, 255, 0.75);

    pointer-events: none;
}

/* وهج خفيف أسفل المنصة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words::after {
    content: "";

    position: absolute;
    z-index: 0;

    left: 20%;
    bottom: -35px;

    width: 60%;
    height: 70px;

    border-radius: 50%;

    background:
        rgba(94, 68, 255, 0.17);

    filter: blur(28px);

    pointer-events: none;
}

/* ضمان ظهور الكلمات فوق زخارف المنصة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word {
    z-index: 5 !important;
}
/* إصلاح واجهة جاي بالغلط في الشبكة */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

/* المؤقت في الزاوية اليسرى */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 35px !important;
    left: 80px !important;
    right: auto !important;

    z-index: 100 !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    color: #ffd84d !important;
    font-size: 27px !important;
    font-weight: 900 !important;

    background: #071f55 !important;

    border: 5px solid #ffd84d !important;
    border-radius: 50% !important;

    box-shadow:
        0 7px 0 #031336,
        0 0 20px rgba(255, 216, 77, 0.32) !important;
}

/* اسم الفريق تحت المؤقت */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-header {
    position: absolute !important;
    top: 120px !important;
    left: 65px !important;
    right: auto !important;

    z-index: 100 !important;

    width: 100px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    text-align: center !important;
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-question-cell-number {
    display: none !important;
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-question-team-name {
    display: block !important;

    width: 100% !important;
    padding: 7px 5px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;

    background: #174b99 !important;

    border: 2px solid #74c9ff !important;
    border-radius: 12px !important;

    box-shadow:
        0 5px 0 #08265e !important;
}

/* إخفاء وسائل المساعدة أثناء جاي بالغلط */

body:has(
    #pg-hex-question-overlay.pg-hex-odd-one-out-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team1-helps,

body:has(
    #pg-hex-question-overlay.pg-hex-odd-one-out-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team2-helps {
    display: none !important;
}

/* عند ظهور الإجابة نخفي المؤقت واسم الفريق */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode:has(
    .pg-hex-odd-revealed
)
#pg-hex-question-timer,

#pg-hex-question-overlay.pg-hex-odd-one-out-mode:has(
    .pg-hex-odd-revealed
)
.pg-hex-question-header {
    display: none !important;
}

/* تصغير صندوق الإجابة والسبب */

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(600px, 82%) !important;
    min-height: 42px !important;

    margin: 4px auto !important;
    padding: 5px 12px !important;

    gap: 1px !important;

    border-radius: 11px !important;
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area span {
    font-size: 11px !important;
}

#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-answer-text {
    font-size: 15px !important;
    line-height: 1.25 !important;
}
:root {
    --navy-950: #031127;
    --navy-900: #061a3f;
    --blue-500: #2f91ff;
    --blue-300: #76cbff;
    --gold-500: #ffbd2e;
    --gold-300: #ffe07b;
    --white: #ffffff;
    --green: #22c55e;
    --red: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', Tahoma, sans-serif; }

body {
    height: 100vh;
    color: var(--white);
    background-color: #04132f;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(47, 145, 255, 0.25), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(124, 58, 237, 0.22), transparent 30%),
        linear-gradient(145deg, rgba(4, 19, 47, 0.95) 0%, rgba(7, 49, 111, 0.9) 50%, rgba(3, 17, 39, 0.95) 100%);
    overflow: hidden;
    position: relative;
}

body::before {
    content: "🧩";
    position: fixed;
    top: 5%;
    right: 3%;
    font-size: 90px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    animation: floatPuzzleOne 12s infinite ease-in-out;
}

body::after {
    content: "🧩";
    position: fixed;
    bottom: 8%;
    left: 4%;
    font-size: 110px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    animation: floatPuzzleTwo 15s infinite ease-in-out;
}

@keyframes floatPuzzleOne {
    0%, 100% { transform: translateY(0) rotate(15deg); }
    50% { transform: translateY(-20px) rotate(25deg); }
}

@keyframes floatPuzzleTwo {
    0%, 100% { transform: translateY(0) rotate(-25deg); }
    50% { transform: translateY(25px) rotate(-15deg); }
}

#app { width: 100vw; height: 100vh; position: relative; z-index: 1; }

.screen {
    display: none !important;
    width: 100%;
    height: 100vh;
    padding: 10px;
    box-sizing: border-box;
}

.screen.active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hidden { display: none !important; }

/* 🌟 1. شاشة البداية */
#start-screen { background-color: #0b132b; padding: 0; }
.poster-container {
    position: relative; width: 100%; max-width: 520px; height: 100vh;
    background: url('screen.png') no-repeat center center / contain;
    display: flex; justify-content: center; align-items: flex-end; padding-bottom: 20px;
}

.play-icon-animator {
    position: absolute; top: 22.2%; right: 14%; width: 44px; height: 44px;
    border-radius: 50%; background: radial-gradient(circle, rgba(72, 202, 228, 0.85) 0%, rgba(0, 119, 182, 0) 70%);
    pointer-events: none; animation: playTrianglePulse 1.8s infinite ease-in-out;
}

@keyframes playTrianglePulse {
    0% { transform: scale(0.85); opacity: 0.4; }
    50% { transform: scale(1.25); opacity: 0.9; }
    100% { transform: scale(0.85); opacity: 0.4; }
}

.start-btn-floating {
    font-size: 1.1rem; padding: 12px 40px; border-radius: 50px;
    box-shadow: 0 8px 25px rgba(255, 183, 3, 0.6); cursor: pointer; transition: 0.25s;
}

.pulse-glow { animation: pulseButton 2s infinite ease-in-out; }
@keyframes pulseButton {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ⚙️ 2. شاشة الإعدادات */
#setup-screen{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
    overflow:hidden;
}
.setup-shell{
    width:min(100%,900px);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

transform: translateY(20px) scale(.90);
    transform-origin:center center;
}
.setup-logo{
    text-align:center;
    margin-top:60px;      /* نزول اللوجو للأسفل */
    margin-bottom:6px;
}
.logo-image { max-width: 220px; height: auto; filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.6)); }

.setup-panel {
    padding: 14px 20px; border: 2px solid rgba(82, 176, 255, 0.68); border-radius: 20px;
    background: linear-gradient(150deg, rgba(9, 48, 103, 0.95), rgba(3, 24, 60, 0.98));
}

.animate-element { opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.4s ease; }
.animate-element.appear { opacity: 1; transform: translateY(0); }

.setup-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; margin-bottom: 10px; }
.teams-setup { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 10px; align-items: end; }
.team-input-group label { display: block; margin-bottom: 3px; font-weight: 700; font-size: 0.9rem; }
.team-input-group input {
    width: 100%; height: 38px; padding: 6px; border: 2px solid var(--blue-500);
    border-radius: 10px; background: rgba(2, 19, 49, 0.86); color: #fff; text-align: center;
}

.versus-badge {
    width: 44px; height: 44px; border-radius: 50%; border: 2px solid #5bbcff;
    background: radial-gradient(circle, #1d63c8, #061d4b); display: flex; align-items: center; justify-content: center; font-weight: 900; margin: auto;
    animation: vsPulse 2s infinite ease-in-out;
}

@keyframes vsPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(47, 145, 255, 0.5); }
    50% { transform: scale(1.08); box-shadow: 0 0 15px rgba(255, 189, 46, 0.8); }
}

.setup-section-title { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 8px 0 6px; }
.setup-section-title span { height: 1.5px; background: linear-gradient(90deg, transparent, var(--blue-500), transparent); }

.round-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.round-option {
    padding: 6px 10px; border: 1px solid #519fe9; border-radius: 10px; background: rgba(8, 38, 82, 0.88);
    color: #fff; font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.25s ease;
}
.round-option.selected { border-color: #70ccff; background: linear-gradient(135deg, #0785f4, #3144df); }

.categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.category-card {
    position: relative; min-height: 55px; padding: 4px 2px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; border: 1px solid #348fe8;
    border-radius: 10px; background: linear-gradient(160deg, rgba(13, 58, 114, 0.9), rgba(3, 27, 67, 0.98));
    transition: all 0.25s ease;
}
.category-card input { position: absolute; opacity: 0; }
.category-card:has(input:checked) { border-color: #79d2ff; background: linear-gradient(145deg, #0875df, #283fc8); }

.setup-start-btn {
    position: relative; width: 100%; min-height: 46px; border: 2px solid var(--gold-300); border-radius: 12px;
    background: linear-gradient(180deg, #ffd45b, #ee9d08); color: #4a2b00; font-size: 1.15rem; font-weight: 900; cursor: pointer;
    overflow: hidden; transition: all 0.2s ease;
}
.setup-back-btn { width: 100%; margin-top: 4px; background: transparent; border: none; color: #d8e9ff; cursor: pointer; }

/* 🎮 3. شاشة اللعب الرئيسية */
#game-screen { justify-content: flex-start; padding: 10px; }
.game-container { width: min(100%, 1300px); margin: auto; }
.game-header {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    gap: 14px;
    direction: rtl;
}.header-card, .turn-card {
    padding: 8px; border: 1px solid rgba(82,176,255,.58); border-radius: 14px;
    background: linear-gradient(145deg, rgba(11,53,110,.96), rgba(3,24,61,.98)); text-align: center;
}
.team-score { font-size: 2rem; font-weight: 900; color: #5bc2ff; }
.turn-card { border-color: #ffd154; background: linear-gradient(145deg, #1d72da, #123e9c); }

.round-bar { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; margin-bottom: 10px; }
.round-box { padding: 6px; border: 1px solid rgba(75,165,255,.45); border-radius: 10px; background: rgba(4,28,67,.88); text-align: center; font-size: 0.85rem; }
.exit-btn { padding: 6px 16px; border: 1px solid #ff7d84; border-radius: 10px; background: linear-gradient(180deg, #f45e67, #bd2933); color: #fff; cursor: pointer; }

.game-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; }
.question-panel, .board-panel {
    border: 1px solid rgba(82,176,255,.52); border-radius: 16px;
    background: linear-gradient(150deg, rgba(8,42,91,.95), rgba(3,23,58,.98)); padding: 14px;
}

.timer-box { padding: 6px; border-radius: 12px; background: radial-gradient(circle, #239cff, #12499d); text-align: center; }
.question-box { min-height: 90px; margin: 8px 0; padding: 10px; background: rgba(2,20,52,.72); border-radius: 10px; text-align: center; font-size: 1.05rem; font-weight: 700; color: #ffe07b; }

.answer-controls { display: flex; flex-direction: column; gap: 8px; }
.answer-display { padding: 8px; background: rgba(34, 197, 94, 0.2); border: 1px solid #22c55e; border-radius: 8px; text-align: center; font-weight: bold; }
.judgement-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.btn { padding: 8px 14px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-gold { background: var(--gold-500); color: #000; }
.btn-blue { background: var(--blue-500); color: #000; }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.full-width { width: 100%; }

.help-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.help-btn { padding: 6px; border: none; border-radius: 6px; background: #2b6cb0; color: #fff; font-size: 0.75rem; cursor: pointer; }

/* 🧩 تكبير لوحة البازل والشبكة 5x4 بالكامل */
.board-panel { display: flex; align-items: center; justify-content: center; }
.puzzle-image {
    position: relative;
    width: 100%;
    max-width: 750px; /* تكبير الحجم بشكل ممتاز */
    aspect-ratio: 5/4;
    border: 3px solid #4baeff;
    border-radius: 14px;
    overflow: hidden;
    background-color: #0b132b;
}

#puzzle-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

#puzzle-grid, .puzzle-board {
    position: absolute;
    inset: 0;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* 5 أعمدة */
    grid-template-rows: repeat(4, 1fr) !important;    /* 4 صفوف */
    gap: 4px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    z-index: 2;
}

/* المربعات الأزرق الصلبة */
.puzzle-tile {
    background-color: #1e3a8a !important;
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease !important;
}

.puzzle-tile:hover{

    background-color:#2563eb !important;

    filter:brightness(115%);

    transform:none !important;

}

/* 🟡 المربع المختار (أصفر مضيء) */
.puzzle-tile.selected, .puzzle-tile.selected-tile {
    background: linear-gradient(145deg, #ffe07b, #ffbd2e) !important;
    color: #3d2100 !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 18px #ffbd2e !important;
    z-index: 10 !important;
    transform: none !important;
}

/* 👈 المربع المفتوح (يختفي لتظهر الصورة) */
.puzzle-tile.revealed, .puzzle-tile.open {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* ==========================================
   تطابق تام بين الصورة وشبكة المربعات لمنع التسرب
   ========================================== */
.board-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.puzzle-image {
    position: relative !important;
    width: 100% !important;
    max-width: 680px !important;
    aspect-ratio: 5 / 4 !important; /* نسبة مطابقة تماماً للـ 5 أعمدة و 4 صفوف */
    height: auto !important;
    border: 3px solid #4baeff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #0b132b !important;
}

#puzzle-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; /* إجبار الصورة على ملء الإطار دون الخروج عنه */
}

#puzzle-grid, .puzzle-board {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: 3px !important;
    padding: 0 !important; /* إلغاء الـ padding لمنع أي تسرب للظهر */
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.puzzle-tile {
    width: 100% !important;
    height: 100% !important;
    border-radius: 2px !important; /* حواف حادة تمنع تسرب الفراغات */
    margin: 0 !important;
}
/* ==========================================
   1. تفعيل أنيميشن وتأثيرات شاشة الإعدادات
   ========================================== */
.animate-element {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.animate-element.appear {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================
   2. منع تسرب الصورة نهائياً ومطابقة المربعات للإطار 100%
   ========================================== */
.board-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.puzzle-image {
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    aspect-ratio: 5 / 4 !important; /* نسبة المطابقة الدقيقة لـ 5x4 */
    height: auto !important;
    border: 3px solid #4baeff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #0b132b !important;
}

#puzzle-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; /* ملء الصورة للإطار تماماً */
}

#puzzle-grid, .puzzle-board {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important; /* منع أي فراغات داخلية */
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

#puzzle-grid .puzzle-tile:nth-child(5n),
.puzzle-board .puzzle-tile:nth-child(5n) {
    border-right: 1px solid #63bfff !important;
}

#puzzle-grid .puzzle-tile:nth-child(n+16),
.puzzle-board .puzzle-tile:nth-child(n+16) {
    border-bottom: 1px solid #63bfff !important;
}

.puzzle-tile {
    width: 100% !important;
    height: 100% !important;
    border-radius: 2px !important;
    margin: 0 !important;
}
/* ==========================================
   قطع بازل عائمة في خلفية شاشة الإعدادات
   ========================================== */

#setup-screen {
    position: relative;
overflow-y: auto;
overflow-x: hidden;    isolation: isolate;
}

.setup-floating-puzzles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#setup-screen .setup-shell {
    position: relative;
    z-index: 2;
}

.floating-puzzle {
    position: absolute;
    display: block;
    opacity: 0.13;
    filter:
        drop-shadow(0 0 10px rgba(47, 145, 255, 0.55))
        drop-shadow(0 0 18px rgba(255, 189, 46, 0.15));
    user-select: none;
    will-change: transform, opacity;
    animation:
        setupPuzzleFloat 8s ease-in-out infinite,
        setupPuzzleGlow 4s ease-in-out infinite;
}

/* أماكن وأحجام القطع */

.puzzle-1 {
    top: 8%;
    right: 5%;
    font-size: 75px;
    animation-delay: 0s;
}

.puzzle-2 {
    top: 25%;
    left: 4%;
    font-size: 55px;
    animation-delay: -2s;
}

.puzzle-3 {
    bottom: 8%;
    right: 9%;
    font-size: 65px;
    animation-delay: -4s;
}

.puzzle-4 {
    bottom: 15%;
    left: 8%;
    font-size: 85px;
    animation-delay: -1s;
}

.puzzle-5 {
    top: 48%;
    right: 1%;
    font-size: 40px;
    animation-delay: -5s;
}

.puzzle-6 {
    top: 5%;
    left: 20%;
    font-size: 38px;
    animation-delay: -3s;
}

.puzzle-7 {
    bottom: 3%;
    left: 35%;
    font-size: 45px;
    animation-delay: -6s;
}

.puzzle-8 {
    top: 58%;
    left: 2%;
    font-size: 32px;
    animation-delay: -2.5s;
}

@keyframes setupPuzzleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
    }

    50% {
        transform: translate3d(0, -24px, 0) rotate(10deg) scale(1.06);
    }
}

@keyframes setupPuzzleGlow {
    0%,
    100% {
        opacity: 0.08;
    }

    50% {
        opacity: 0.18;
    }
}

/* تقليل الحركة لمن يفعّل خيار تقليل المؤثرات في الجهاز */

@media (prefers-reduced-motion: reduce) {
    .floating-puzzle {
        animation: none;
        opacity: 0.09;
    }
}
/* ==========================================
   حركة دخول وتنفس لوجو شاشة الإعدادات
   ========================================== */

/* عند ظهور شاشة الإعدادات */
.setup-logo.appear {
    animation: setupLogoEntrance 0.8s
        cubic-bezier(0.18, 0.89, 0.32, 1.35) both;
}

/* بعد انتهاء حركة الدخول يبدأ اللوجو بالتنفس */
.setup-logo.appear .logo-image {
    transform-origin: center center;
    will-change: transform, filter;

    animation:
        setupLogoBreathing 3s ease-in-out 0.8s infinite,
        setupLogoGlow 3s ease-in-out 0.8s infinite;
}

/* حركة دخول اللوجو */
@keyframes setupLogoEntrance {
    0% {
        opacity: 0;
        transform: translateY(-55px) scale(0.72) rotate(-3deg);
    }

    60% {
        opacity: 1;
        transform: translateY(6px) scale(1.08) rotate(1deg);
    }

    80% {
        transform: translateY(-3px) scale(0.97) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* تنفس خفيف ومستمر */
@keyframes setupLogoBreathing {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

/* تغير التوهج حول اللوجو */
@keyframes setupLogoGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 6px 15px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 5px rgba(47, 145, 255, 0.18));
    }

    50% {
        filter:
            drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 15px rgba(47, 145, 255, 0.55))
            drop-shadow(0 0 9px rgba(255, 189, 46, 0.35));
    }
}

/* إيقاف الحركة لمن فعّل تقليل المؤثرات */
@media (prefers-reduced-motion: reduce) {
    .setup-logo.appear,
    .setup-logo.appear .logo-image {
        animation: none;
    }
}
/* ==================================================
   الصفحة الثالثة فقط: إظهار لوحة البازل كاملة
   ================================================== */

#game-screen {
    overflow: hidden;
}

#game-screen .game-container {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#game-screen .game-layout {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

#game-screen .board-panel {
    min-height: 0;
    padding: 8px;
    overflow: hidden;
}

#game-screen .puzzle-image {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 205px) !important;
    aspect-ratio: 5 / 4 !important;
    margin: auto;
}
@media (max-height: 800px) {

    #game-screen {
        padding: 8px;
    }

    #game-screen .game-header {
        margin-bottom: 6px;
    }

    #game-screen .header-card,
    #game-screen .turn-card {
        padding: 5px 8px;
    }

    #game-screen .team-score {
        font-size: 1.7rem;
    }

    #game-screen .round-bar {
        margin-bottom: 7px;
    }

    #game-screen .puzzle-image {
        max-height: calc(100vh - 195px) !important;
    }
}
/* ==========================================
   شكل وسيلة المساعدة بعد استخدامها
   ========================================== */

.help-btn.help-used,
.help-btn:disabled {
    background: linear-gradient(
        145deg,
        #4b5563,
        #252d3a
    ) !important;

    color: rgba(255, 255, 255, 0.55) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    opacity: 0.58 !important;

    cursor: not-allowed !important;

    filter: grayscale(0.85) !important;

    box-shadow: none !important;

    transform: none !important;
}

/* منع أي تأثير عند تمرير الماوس على الزر المستخدم */
.help-btn.help-used:hover,
.help-btn:disabled:hover {
    transform: none !important;
    filter: grayscale(0.85) !important;
    box-shadow: none !important;
}
/* ==========================================
   شكل وسيلة المساعدة بعد استخدامها
   ========================================== */

.help-btn.help-used,
.help-btn:disabled {
    background: linear-gradient(
        145deg,
        #4b5563,
        #252d3a
    ) !important;

    color: rgba(255, 255, 255, 0.55) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    opacity: 0.58 !important;

    cursor: not-allowed !important;

    filter: grayscale(0.85) !important;

    box-shadow: none !important;

    transform: none !important;
}

/* منع أي تأثير عند تمرير الماوس على الزر المستخدم */
.help-btn.help-used:hover,
.help-btn:disabled:hover {
    transform: none !important;
    filter: grayscale(0.85) !important;
    box-shadow: none !important;
}
/* الحرف الأول داخل خانة السؤال */
.first-letter-inline {
    display: block;
    width: fit-content;
    min-width: 30px;

    margin: 5px auto 0;
    padding: 1px 10px;

    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 900;

    color: #ffe07b;
    background: rgba(255, 189, 46, 0.12);

    border: 1px solid rgba(255, 224, 123, 0.55);
    border-radius: 7px;

    text-align: center;
    text-shadow: 0 0 7px rgba(255, 189, 46, 0.65);
}

/* تنسيق الحرف الأول تحت السؤال */
.first-letter-display {
    margin: 2px 0 4px;
    height: 28px;
    min-height: 28px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.15rem;
    line-height: 1;
    font-weight: 900;

    color: #ffe07b;
    background: transparent;

    border: none;
    border-radius: 0;

    text-shadow: 0 0 6px rgba(255, 189, 46, 0.8);
}

.first-letter-display.hidden {
    display: none !important;
}
.first-letter-display{
    min-height:22px;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    color:#FFD54F;
    margin-top:6px;
    margin-bottom:6px;
}
.first-letter-help-box {
    height: 24px;
    min-height: 24px;
    max-height: 24px;

    margin-top: 2px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    line-height: 1;
    font-weight: 900;

    color: #ffd54f;

    background: transparent;
    border: none;

    overflow: hidden;
}
#team2-card-box {
    overflow: hidden;
}
/* تثبيت مساحة الإجابة وأزرار الحكم حتى لا تتحرك الصفحة */

#answer-display {
    min-height: 38px;
    max-height: 38px;
    overflow: hidden;
}

#judgement-btns {
    min-height: 38px;
}

/* إخفاء هذه العناصر بدون إزالة مساحتها */
#answer-display.hidden,
#judgement-btns.hidden {
    display: grid !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* إظهارها بشكل طبيعي */
#answer-display:not(.hidden),
#judgement-btns:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
#game-screen .question-panel {
    overflow: hidden;
}

#game-screen .answer-controls {
    min-height: 125px;
}
/* ===========================
   السؤال العلوي
=========================== */

.top-question-box{
width: 70%;
min-height: 64px;
max-height: 64px;

margin: 0 0 3px 0;
padding: 6px 16px;
margin-left: auto;
margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #0f2f6f;
    border: 2px solid #2b69c9;
    border-radius: 16px;

    color: #fff;
   font-size: 21px;

    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.game-header {
    display: grid;
    grid-template-columns: 1fr 220px 1fr;
    gap: 14px;
}
/* وضع جملة أول حرف في المنتصف بين الفريقين */
.game-header {
    position: relative;
}

#first-letter-display {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: max-content;
    max-width: 260px;
    text-align: center;
    z-index: 10;
    font-size: 22px;
    font-weight: 900;
}

/* إخفاؤها عندما لا تكون مستخدمة */
#first-letter-display.hidden {
    display: none !important;
}
.center-status{
    position:absolute;
    left:50%;
    top:10px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    z-index:20;
}

.turn-display{
    color:#ffffff;
    font-size:18px;
    font-weight:900;
    text-align:center;
    line-height:1.4;
}

#first-letter-display{
    position:static !important;
    transform:none !important;
    margin:0 !important;
}
/* ==========================================
   نافذة رسائل بازغو
   ========================================== */

.puzzgo-message-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:99999;
}

.puzzgo-message-overlay.hidden{
    display:none;
}

.puzzgo-message-box{

    display:flex;
    align-items:flex-end;
    gap:24px;

    max-width:760px;
    width:90%;

    animation:popupShow .30s ease;
}

.puzzgo-character-side{

    width:180px;
    flex-shrink:0;
}

#puzzgo-message-character{
    position:absolute;

    left:22px;
    bottom:22px;

    width:160px;
    height:auto;

    z-index:20;

    pointer-events:none;

    animation:characterIdle 2.5s ease-in-out infinite;
}

.puzzgo-speech-bubble{

    position:relative;

    flex:1;

    background:#ffffff;

    border-radius:28px;

    padding:28px;

    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.puzzgo-speech-bubble::before{

    content:"";

    position:absolute;

    left:-18px;
    bottom:45px;

    border-width:14px 18px 14px 0;
    border-style:solid;

    border-color:
        transparent
        #ffffff
        transparent
        transparent;
}

.puzzgo-message-title{

    margin:0 0 12px;

    font-size:30px;

    font-weight:900;

    color:#204a87;
}

.puzzgo-message-text{

    font-size:22px;

    line-height:1.8;

    color:#333;
}

.puzzgo-message-ok{

    margin-top:24px;

    border:none;

    border-radius:14px;

    padding:14px 36px;

    background:#4CAF50;

    color:#fff;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;
}

.puzzgo-message-close{

    position:absolute;

    top:12px;
    left:12px;

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;
}

@keyframes popupShow{

    from{
        transform:scale(.85);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

@keyframes characterIdle{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}
/* إظهار عنوان ونص رسالة بازغو بوضوح */
#puzzgo-message-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 5;
    margin: 0 0 12px !important;
    color: #e53935 !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-align: center;
}

#puzzgo-message-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 5;
    margin: 10px 0 !important;
    color: #17233f !important;
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    direction: rtl;
}

/* تثبيت بازغو داخل مربع الرسالة الأبيض */
.puzzgo-message-box {
    display: block !important;
}

.puzzgo-speech-bubble {
    position: relative !important;
    min-height: 250px;
    padding-left: 155px !important;
}

.puzzgo-character-side {
    position: absolute !important;
    left: 60px !important;
    bottom: 18px !important;
    width: 115px !important;
    height: auto !important;
    z-index: 10;
}

#puzzgo-message-character {
    position: static !important;
    width: 180% !important;
    height: auto !important;
    display: block;
}

/* إصلاح نافذة الرسالة: مستطيل واحد فقط */
.puzzgo-message-box {
    position: relative !important;
    display: block !important;

    width: 560px !important;
    max-width: 90vw !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* المستطيل الأبيض الوحيد */
.puzzgo-speech-bubble {
    position: relative !important;

    width: 100% !important;
    min-height: 250px !important;

    box-sizing: border-box !important;

    padding: 28px 28px 28px 150px !important;

    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25) !important;
}

/* إلغاء ذيل المحادثة القديم */
.puzzgo-speech-bubble::before {
    display: none !important;
}


/* ==========================================
   أزرار تأكيد التخمين
   ========================================== */

.puzzgo-confirm-buttons{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:20px;
}

.puzzgo-confirm-buttons.hidden{

    display:none;
}

.puzzgo-confirm-yes{

    background:#43a047;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:12px 22px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;
}

.puzzgo-confirm-cancel{

    background:#e53935;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:12px 22px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;
}

.puzzgo-confirm-yes:hover{

    transform:scale(1.05);
}

.puzzgo-confirm-cancel:hover{

    transform:scale(1.05);
}

/* ==========================================
   نموذج كتابة تخمين الصورة
========================================== */

.puzzgo-guess-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:18px;
}

.puzzgo-guess-form.hidden{

    display:none;
}

.puzzgo-guess-input{

    width:100%;

    padding:14px;

    font-size:22px;

    text-align:center;

    border-radius:14px;

    border:2px solid #3f7cff;

    outline:none;
}

.puzzgo-guess-form-buttons{

    display:flex;

    justify-content:center;

    gap:16px;
}

.puzzgo-guess-submit{

    background:#43a047;

    color:white;

    border:none;

    border-radius:12px;

    padding:12px 24px;

    font-size:18px;

    cursor:pointer;
}

.puzzgo-guess-cancel{

    background:#e53935;

    color:white;

    border:none;

    border-radius:12px;

    padding:12px 24px;

    font-size:18px;

    cursor:pointer;
}
/* زر الانتقال إلى الجولة التالية */
.next-round-btn {
    width: 100%;
    margin-top: 12px;
    padding: 15px 20px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(180deg, #ffd15a, #f3a900);
    color: #3b2800;

    font-size: 21px;
    font-weight: 900;

    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);

    transition: transform 0.2s ease;
}

.next-round-btn:hover {
    transform: scale(1.03);
}

.next-round-btn.hidden {
    display: none;
}
/* ==========================================
   شاشة نهاية المباراة
========================================== */

.match-end-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(5, 15, 40, 0.78);
    backdrop-filter: blur(5px);

    z-index: 100000;
}

.match-end-overlay.hidden {
    display: none;
}

.match-end-card {
    width: 520px;
    max-width: 90vw;

    padding: 34px;

    background: #ffffff;
    border: 4px solid #f5b82e;
    border-radius: 26px;

    text-align: center;
    direction: rtl;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.38);

    animation: matchEndAppear 0.35s ease;
}

#match-end-title {
    margin: 0 0 14px;

    color: #173d79;
    font-size: 34px;
    font-weight: 900;
}

#match-end-winner {
    margin: 0 0 22px;

    color: #e49a00;
    font-size: 26px;
    font-weight: 900;
}

.match-end-card hr {
    border: none;
    height: 2px;

    margin: 22px 0;

    background: linear-gradient(
        to left,
        transparent,
        #d8e1f2,
        transparent
    );
}

.match-end-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.match-end-scores > div {
    padding: 18px 12px;

    background: #f4f7fc;
    border: 2px solid #d9e3f5;
    border-radius: 16px;
}

.match-end-scores span {
    display: block;

    margin-bottom: 10px;

    color: #23395f;
    font-size: 20px;
    font-weight: 800;
}

.match-end-scores strong {
    display: block;

    color: #173d79;
    font-size: 34px;
    font-weight: 900;
}

.match-end-btn {
    width: 100%;

    margin-top: 12px;
    padding: 14px 20px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(
        180deg,
        #ffd15a,
        #efa900
    );

    color: #3b2800;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.match-end-btn.secondary {
    background: #244d8d;
    color: #ffffff;
}

.match-end-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.22);
}

@keyframes matchEndAppear {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* ==========================================
   لوحتا وسائل المساعدة المنفصلتان
   مرحلة تجريبية آمنة
========================================== */

.separate-team-helps {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

.team-help-panel {
    position: absolute;
    top: 340px;

    width: 105px;
    min-height: 260px;

    padding: 10px 7px;

    background: rgba(5, 38, 82, 0.96);
    border: 2px solid #2c74b9;
    border-radius: 16px;

    box-sizing: border-box;
    text-align: center;
    direction: rtl;

    pointer-events: auto;
}

#team1-help-panel {
    right: 395px;
}

#team2-help-panel {
    left: 40px;
}

.team-help-title {
    margin-bottom: 10px;

    color: #54c8ff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.5;
}

.team-help-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.team-help-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:10px;
}

.team-help-icon{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #3fa9ff;
    border-radius:10px;

    background:#0b3569;
    color:#fff;

    font-size:20px;
    cursor:pointer;

    transition:0.2s;
}

.team-help-icon:hover{
    transform:scale(1.08);
    border-color:#66d2ff;
}

.team-help-icon.help-used,
.team-help-icon:disabled{
    opacity:.35;
    cursor:not-allowed;
}

/* ==========================================
   احتفال الفوز بتخمين الصورة
========================================== */

.round-celebration {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 10, 35, 0.35);
    backdrop-filter: blur(2px);

    overflow: hidden;
    pointer-events: none;
}

.round-celebration.hidden {
    display: none;
}

.celebration-content {
    position: relative;
    z-index: 2;

    min-width: 420px;
    max-width: 80vw;

    padding: 28px 45px;

    text-align: center;
    direction: rtl;

    background: rgba(5, 35, 80, 0.94);
    border: 3px solid #ffd65a;
    border-radius: 26px;

    box-shadow:
        0 0 20px rgba(255, 214, 90, 0.8),
        0 0 55px rgba(255, 170, 0, 0.5);

    animation: celebrationPop 0.65s ease both;
}

.celebration-trophy {
    font-size: 70px;
    line-height: 1;
    margin-bottom: 8px;

    animation: trophyBounce 0.9s ease infinite alternate;
}

.celebration-title {
    margin: 0;

    color: #ffffff;
    font-size: 38px;
    font-weight: 900;

    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.65),
        0 0 20px rgba(255, 215, 0, 0.7);
}

.celebration-team-name {
    margin-top: 10px;

    color: #55d7ff;
    font-size: 25px;
    font-weight: 900;
}

.celebration-image-name {
    margin-top: 12px;

    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.celebration-points {
    margin-top: 14px;

    color: #ffd84d;
    font-size: 42px;
    font-weight: 900;

    text-shadow:
        0 0 10px rgba(255, 216, 77, 0.8),
        0 0 25px rgba(255, 153, 0, 0.65);

    animation: pointsPulse 0.75s ease infinite alternate;
}

.celebration-confetti {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    top: -40px;

    width: 12px;
    height: 20px;

    border-radius: 3px;

    animation-name: confettiFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes celebrationPop {
    0% {
        opacity: 0;
        transform: scale(0.45) rotate(-3deg);
    }

    70% {
        opacity: 1;
        transform: scale(1.08) rotate(1deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes trophyBounce {
    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(-10px) scale(1.08);
    }
}

@keyframes pointsPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

@keyframes confettiFall {
    0% {
        transform:
            translateY(-30px)
            rotate(0deg);
        opacity: 1;
    }

    100% {
        transform:
            translateY(115vh)
            rotate(900deg);
        opacity: 0.9;
    }
}
body.celebration-active{
    overflow:hidden;
}

body.celebration-active button{
    pointer-events:none;
}

body.celebration-active .celebration-content{
    pointer-events:auto;
}
/* ==========================================
   شاشة انتهاء الجولة
========================================== */

.round-complete-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.round-complete-overlay.hidden{
    display:none;
}

.round-complete-card{

    width:min(90%,500px);

    background:#ffffff;

    border-radius:28px;

    padding:30px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    animation:roundCardAppear .35s ease;
}

@keyframes roundCardAppear{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.round-complete-icon{

    font-size:70px;

    margin-bottom:10px;

}

.round-complete-title{

    font-size:32px;

    color:#0b63ff;

    margin-bottom:10px;

}

.round-complete-team{

    font-size:24px;

    font-weight:bold;

    color:#222;

    margin-bottom:10px;

}

.round-complete-image{

    font-size:22px;

    color:#666;

    margin-bottom:25px;

}

.round-complete-score-row{

    display:flex;

    gap:15px;

    justify-content:center;

    margin-bottom:30px;

}

.round-complete-box{

    flex:1;

    background:#f3f6ff;

    border-radius:18px;

    padding:15px;

}

.round-complete-box span{

    display:block;

    color:#666;

    margin-bottom:8px;

}

.round-complete-box strong{

    font-size:30px;

    color:#0b63ff;

}

.round-complete-next{

    width:100%;

    border:none;

    background:#0b63ff;

    color:#fff;

    font-size:22px;

    padding:16px;

    border-radius:16px;

    cursor:pointer;

    transition:.2s;

}

.round-complete-next:hover{

    transform:scale(1.03);

}

/* ===================================================
   نافذة فئة زوم
=================================================== */

.zoom-question-overlay{

    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.65);

    z-index:99999;

    backdrop-filter:blur(4px);

}

.zoom-question-card{

    width:min(900px,85vw);
    height:min(700px,82vh);

    background:#ffffff;

    border-radius:24px;

    box-shadow:0 25px 70px rgba(0,0,0,.45);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    position:relative;

    animation:zoomPopup .25s ease;

}

.zoom-question-header{

    text-align:center;

    padding:20px;

}

.zoom-question-header h2{

    margin:10px 0 5px;

    font-size:36px;

}

.zoom-question-header p{

    font-size:20px;

    color:#666;

}

.zoom-question-icon{

    font-size:44px;

}

.zoom-image-container{

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

}

.zoom-question-image{

    max-width:100%;
max-height:420px;
    object-fit:contain;

    border-radius:16px;

}

.zoom-show-answer{

    margin:15px auto;

    padding:15px 40px;

    font-size:22px;

    cursor:pointer;

}

.zoom-answer-display{

    text-align:center;

    font-size:28px;

    margin-top:10px;

}

.zoom-judgement-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    padding:20px;

}

.zoom-correct-button,
.zoom-wrong-button{

    font-size:22px;

    padding:15px 35px;

    cursor:pointer;

}

.zoom-question-close{

    position:absolute;

    top:12px;
    left:12px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:26px;

}

@keyframes zoomPopup{

    from{

        transform:scale(.85);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

/* تحسين نافذة سؤال زوم */

.zoom-question-card {
    height: min(760px, 88vh);
}

.zoom-image-container {
    flex: 1;
    min-height: 0;
    padding: 12px 20px;
    overflow: hidden;
}

.zoom-question-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

object-fit: cover;
width: 100%;
height: 100%;
    border-radius: 16px;
    display: block;
}

.zoom-show-answer {
    flex-shrink: 0;
    display: block;

    margin: 12px auto 18px;
    padding: 14px 40px;

    border: none;
    border-radius: 14px;

    font-size: 21px;
    font-weight: 700;

    background: #1687ff;
    color: #ffffff;

    cursor: pointer;
}

.zoom-answer-display {
    flex-shrink: 0;
    margin: 8px 20px;

    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

.zoom-judgement-buttons {
    flex-shrink: 0;
    padding: 12px 20px 20px;
}

.zoom-correct-button {
    border: none;
    border-radius: 14px;
    background: #18a957;
    color: white;
}

.zoom-wrong-button {
    border: none;
    border-radius: 14px;
    background: #e5484d;
    color: white;
}

/* =========================================
   الشكل النهائي لنافذة زوم
========================================= */

.zoom-question-card {
    width: min(1100px, 90vw) !important;
    height: min(860px, 90vh) !important;

    padding: 22px 28px 26px !important;
    box-sizing: border-box !important;

    border-radius: 28px !important;
    overflow: hidden !important;
}

/* الجزء العلوي: الأيقونة والجملة */
.zoom-question-header {
    padding: 0 10px 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.zoom-question-icon {
    display: block !important;
    font-size: 46px !important;
    line-height: 1 !important;
    margin: 0 auto 10px !important;
}

.zoom-question-header h2 {
    display: none !important;
}

.zoom-question-header p {
    margin: 0 !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;

    color: #111827 !important;
}

/* مساحة الصورة تصبح الأكبر */
.zoom-image-container {
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;
    border-radius: 22px !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.zoom-question-image {
    width: 60% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

object-fit: contain !important;    object-position: center !important;
margin: 0 auto !important;
    border-radius: 22px !important;
    display: block !important;
}

/* زر إظهار الإجابة */
.zoom-show-answer {
    width: 360px !important;
    min-height: 68px !important;

    margin: 18px auto 10px !important;
    padding: 12px 28px !important;

    border: none !important;
    border-radius: 16px !important;

    background: #1687ff !important;
    color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 800 !important;

    flex-shrink: 0 !important;
}

/* مكان ظهور الإجابة */
.zoom-answer-display {
    margin: 10px 0 !important;
    padding: 10px 18px !important;

    font-size: 26px !important;
    font-weight: 800 !important;

    flex-shrink: 0 !important;
}

/* أزرار الحكم */
.zoom-judgement-buttons {
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 12px 0 0 !important;

    display: flex !important;
    justify-content: space-between !important;
    gap: 24px !important;

    flex-shrink: 0 !important;
}

.zoom-correct-button,
.zoom-wrong-button {
    flex: 1 !important;
    min-height: 66px !important;

    border: none !important;
    border-radius: 16px !important;

    color: #ffffff !important;

    font-size: 26px !important;
    font-weight: 800 !important;
}

.zoom-correct-button {
    background: #22b455 !important;
}

.zoom-wrong-button {
    background: #ef3340 !important;
}

/* =========================================
   تصغير أزرار نافذة زوم وإعطاء مساحة أكبر للصورة
========================================= */

/* زر إظهار الإجابة */
.zoom-show-answer{
    width: 260px !important;
    min-height: 52px !important;

    margin: 12px auto 8px !important;

    font-size: 22px !important;

    border-radius: 12px !important;
}

/* صندوق الإجابة */
.zoom-answer-display{
    margin: 6px 0 !important;
    padding: 6px !important;

    font-size: 22px !important;
}

/* أزرار صحيحة وخاطئة */
.zoom-judgement-buttons{

    margin-top:8px !important;

    gap:16px !important;
}

/* الزرين */
.zoom-correct-button,
.zoom-wrong-button{

    min-height:54px !important;

    font-size:22px !important;

    border-radius:14px !important;
}

/* نعطي الصورة مساحة أكبر */
.zoom-image-container{

    flex:1 !important;

    margin-bottom:8px !important;
}
/* =========================================
   الشكل النهائي لأزرار نافذة زوم
========================================= */

/* زر إظهار الإجابة */
.zoom-show-answer{
    width:240px !important;
    height:50px !important;

    margin:12px auto 0 !important;

    font-size:20px !important;
    font-weight:700 !important;

    border-radius:12px !important;
}

/* عندما يظهر زرا الحكم */
.zoom-judgement-buttons{

    margin-top:8px !important;

    display:flex !important;
    justify-content:center !important;

    gap:14px !important;
}

/* الزرين */
.zoom-correct-button,
.zoom-wrong-button{

    width:220px !important;
    height:52px !important;

    flex:none !important;

    font-size:20px !important;
    font-weight:700 !important;

    border-radius:12px !important;
}
/* =========================================
   نافذة فئة ركّز - الفيديو
========================================= */

.focus-video-overlay{
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.68);
    backdrop-filter: blur(4px);

    z-index: 99999;
}

.focus-video-card{
   width: 96vw;
height: 94vh;

    background: #ffffff;
    border-radius: 28px;

    box-shadow: 0 25px 70px rgba(0,0,0,.45);

    display: flex;
    flex-direction: column;

    padding: 22px 28px 28px;
    box-sizing: border-box;

    overflow: hidden;
}

.focus-video-header{
    text-align: center;
    flex-shrink: 0;

    margin-bottom: 14px;
}

.focus-video-icon{
    display: block;

    font-size: 46px;
    line-height: 1;

    margin-bottom: 8px;
}

.focus-video-header h2{
    margin: 0 0 5px;

    font-size: 34px;
    font-weight: 800;

    color: #111827;
}

.focus-video-header p{
    margin: 0;

    font-size: 20px;
    font-weight: 600;

    color: #6b7280;
}

.focus-video-container{
    flex: 1;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 20px;

    background: #000;
}

.focus-video-player{
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    background: #000;
}

/* ==========================================
   نافذة سؤال فئة ركّز
========================================== */

.focus-question-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 15, 45, 0.88);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.focus-question-overlay.hidden {
    display: none;
}

.focus-question-card {
    width: min(700px, 90vw);
    background: linear-gradient(145deg, #0b3975, #071f4d);
    border: 3px solid #35a9ff;
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.focus-question-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.focus-question-header h2 {
    margin: 0;
    font-size: 32px;
}

.focus-question-icon {
    font-size: 38px;
}

.focus-question-text {
    background: rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 25px;
    margin-bottom: 25px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.6;
}

.focus-show-answer,
.focus-correct-button,
.focus-wrong-button,
.focus-replay-button {
    border: none;
    border-radius: 14px;
    padding: 14px 25px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin: 6px;
}

.focus-show-answer {
    background: #ffbd24;
    color: #071f4d;
}

.focus-correct-button {
    background: #24c96b;
    color: white;
}

.focus-wrong-button {
    background: #ef4444;
    color: white;
}

.focus-replay-button {
    background: #35a9ff;
    color: white;
}

.focus-answer-display {
    margin: 20px 0;
    padding: 18px;
    background: rgba(255,255,255,0.12);
    border-radius: 14px;
    font-size: 23px;
}

.focus-judgement-buttons {
    margin-top: 15px;
}

.focus-question-card .hidden {
    display: none;
}

/* ==========================================
   ركّز - شاشة فيديو كاملة
========================================== */

.focus-video-overlay{
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #000 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    z-index: 999999 !important;
}

.focus-video-card{
    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 12px 16px 16px !important;

    border-radius: 0 !important;

    background: #fff !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.focus-video-header{
    flex: 0 0 auto !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    text-align: center !important;
}

.focus-video-header h2{
    margin: 0 !important;
    font-size: 28px !important;
}

.focus-video-header p{
    margin: 2px 0 4px !important;
    font-size: 17px !important;
}

.focus-video-icon{
    font-size: 32px !important;
}

.focus-video-container{
    position: relative !important;

    flex: 1 !important;
    min-height: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.focus-video-player{
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    background: #000 !important;

    display: block !important;
}

/* زر التشغيل في منتصف الفيديو تمامًا */
.focus-video-start{
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    z-index: 50 !important;

    min-width: 220px !important;

    padding: 18px 34px !important;

    border: 3px solid #fff !important;
    border-radius: 20px !important;

    background: #ffbd24 !important;
    color: #102347 !important;

    font-size: 26px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 22px rgba(255,189,36,.55) !important;
}

.focus-video-start.hidden{
    display: none !important;
}

.focus-video-overlay.hidden{
    display: none !important;
}

/* ==========================================
   نافذة فئة شيفرة
========================================== */

.cipher-overlay{
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(0,0,0,.88);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 999999;
}

.cipher-overlay.hidden{
    display: none !important;
}

.cipher-card{
    width: 94vw;
    height: 92vh;

    background: #ffffff;
    border-radius: 24px;

    padding: 18px 22px 22px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.cipher-header{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.cipher-header span{
    font-size: 34px;
}

.cipher-header h2{
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    color: #0b1f44;
}

.cipher-image-container{
    flex: 1;
    min-height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #f5f7fb;
    border-radius: 18px;

    overflow: hidden;

    padding: 10px;
}

.cipher-image{
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

#cipher-show-answer{
    margin: 12px auto 0;

    padding: 12px 28px;

    border: none;
    border-radius: 14px;

    background: #ffbd24;
    color: #102347;

    font-size: 20px;
    font-weight: 800;

    cursor: pointer;
}

#cipher-answer-display{
    margin: 12px auto 0;

    padding: 12px 24px;

    background: #eef4ff;
    border-radius: 14px;

    font-size: 22px;
    font-weight: 700;

    color: #0b1f44;
}

#cipher-judgement-buttons{
    margin-top: 10px;

    display: flex;
    justify-content: center;
    gap: 12px;
}

#cipher-correct-button,
#cipher-wrong-button{
    border: none;
    border-radius: 14px;

    padding: 12px 22px;

    font-size: 19px;
    font-weight: 800;

    cursor: pointer;
}

#cipher-correct-button{
    background: #24c96b;
    color: #fff;
}

#cipher-wrong-button{
    background: #ef4444;
    color: #fff;
}

#cipher-answer-display.hidden,
#cipher-judgement-buttons.hidden{
    display: none !important;
}
/* ==========================================
   نافذة فئة بدون كلام
========================================== */

.charades-overlay{
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.92);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 999999;
}

.charades-overlay.hidden{
    display: none !important;
}

.charades-card{
    width: 96vw;
    height: 94vh;

    background: #ffffff;
    border-radius: 24px;

    padding: 18px 24px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.charades-header{
    text-align: center;
    margin-bottom: 10px;
}

.charades-header span{
    font-size: 42px;
}

.charades-header h2{
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    color: #0b1f44;
}

.charades-header p{
    margin: 5px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #555;
}

.charades-qr{
    width: 380px;
    height: 380px;

    margin: 10px 0;

    background: #ffffff;

    border: 6px solid #102347;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}



#charades-timer{
    margin-top: 10px;

    font-size: 64px;
    font-weight: 900;

    color: #102347;

    line-height: 1;
}

#charades-show-answer{
    margin-top: 12px;

    padding: 11px 28px;

    border: none;
    border-radius: 14px;

    background: #2e8df7;
    color: white;

    font-size: 19px;
    font-weight: 800;

    cursor: pointer;
}

#charades-answer-display{
    margin-top: 10px;

    padding: 10px 22px;

    background: #eef4ff;
    border-radius: 14px;

    font-size: 22px;
    font-weight: 800;

    color: #0b1f44;
}

#charades-judgement-buttons{
    margin-top: 10px;

    display: flex;
    justify-content: center;
    gap: 12px;
}

#charades-correct-button,
#charades-wrong-button{
    border: none;
    border-radius: 14px;

    padding: 12px 24px;

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

#charades-correct-button{
    background: #24c96b;
    color: white;
}

#charades-wrong-button{
    background: #ef4444;
    color: white;
}

#charades-answer-display.hidden,
#charades-judgement-buttons.hidden{
    display: none !important;
}

/* إصلاح شكل QR - بدون كلام */
#charades-qr{
    width: 380px !important;
    height: 380px !important;

    min-width: 380px !important;
    min-height: 380px !important;

    flex-shrink: 0 !important;

    padding: 18px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}

#charades-qr canvas,
#charades-qr img{
    width: 340px !important;
    height: 340px !important;

    min-width: 340px !important;
    min-height: 340px !important;

    object-fit: contain !important;
}

/* تثبيت زر ابدأ داخل شاشة بدون كلام */
.charades-card{
    position: relative !important;
}

#charades-start-button{
    position: absolute !important;

    right: 300px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 999 !important;

    display: block !important;

    padding: 16px 34px !important;

    font-size: 24px !important;
    font-weight: 900 !important;

    border-radius: 16px !important;
}

/* ===== نافذة تأكيد الخروج ===== */

.exit-confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 2147483647 !important;
    align-items: center;
    justify-content: center;
    direction: rtl;
}

.exit-confirm-modal.show {
    display: flex;
}

.exit-confirm-box {
    width: 90%;
    max-width: 420px;
    background: #0d3768;
    border: 2px solid #2ea8ff;
    border-radius: 22px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
}

.exit-confirm-icon {
    font-size: 42px;
    margin-bottom: 8px;
}

.exit-confirm-box h2 {
    margin: 0 0 12px;
    color: white;
    font-size: 24px;
}

.exit-confirm-box p {
    color: white;
    font-size: 18px;
    margin: 0 0 24px;
}

.exit-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.exit-confirm-buttons button {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.exit-confirm-yes {
    background: #ffb51b;
    color: #102d54;
}

.exit-confirm-no {
    background: #168cff;
    color: white;
}

.exit-confirm-buttons button:hover {
    transform: translateY(-2px);
}

/* =========================
   نافذة سؤال أعلام الدول
========================= */

.flags-question-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.78);
    direction: rtl;
}

.flags-question-overlay.hidden {
    display: none;
}

.flags-question-card {
    width: min(820px, 92vw);
    max-height: 90vh;

    padding: 28px 32px;

    background: #0d315f;
    border: 3px solid #2ea8ff;
    border-radius: 24px;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 25px rgba(46, 168, 255, 0.28);
}

.flags-question-title {
    margin: 0 0 22px;

    color: white;
    font-size: 32px;
    font-weight: 900;
}

.flags-question-image-box {
    width: 100%;
    min-height: 260px;
max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;
}

#flags-question-image {
    display: block;

    max-width: 92%;
    max-height: 300px;

    width: auto;
    height: auto;

    object-fit: contain;
    border-radius: 14px;
}

.flags-answer-box {
    margin: 14px auto;

    padding: 14px 20px;

    background: rgba(255, 255, 255, 0.10);
    border: 2px solid #2ea8ff;
    border-radius: 14px;

    color: white;

    font-size: 24px;
    font-weight: 800;
}

.flags-answer-box.hidden {
    display: none;
}

#flags-answer-text {
    color: #ffd54a;
}

.flags-show-answer {
    margin: 10px auto 16px;

    padding: 13px 34px;

    border: none;
    border-radius: 14px;

    background: #2d8bea;
    color: white;

    font-size: 21px;
    font-weight: 800;

    cursor: pointer;
}

.flags-show-answer:hover {
    filter: brightness(1.08);
}

.flags-result-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 8px;
}

.flags-correct-button,
.flags-wrong-button {
    min-width: 190px;

    padding: 13px 22px;

    border: none;
    border-radius: 14px;

    color: white;

    font-size: 20px;
    font-weight: 900;

    cursor: pointer;
}

.flags-correct-button {
    background: #27ae60;
}

.flags-wrong-button {
    background: #d83b3b;
}

.flags-correct-button:hover,
.flags-wrong-button:hover {
    filter: brightness(1.08);
}
/* رفع زري الإجابة الصحيحة والخاطئة في نافذة الأعلام فقط */
/* رفع أزرار نافذة الأعلام قليلاً */
#flags-show-answer {
    display: block;
    position: relative;
    z-index: 50;
    margin: 10px auto 14px !important;
    transform: none !important;
    flex-shrink: 0;
}

.flags-result-buttons {
    position: relative;
    z-index: 50;
    margin-top: 8px;
    transform: none !important;
}

html {
    direction: ltr;
}

body {
    direction: rtl;
}

/* =====================================================
   إعادة تصميم صفحة إعداد المباراة - عرض كامل
===================================================== */

#setup-screen {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 20px 30px 35px !important;

    display: block !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;
}

/* الحاوية الرئيسية */
#setup-screen .setup-shell {
    width: 100% !important;
    max-width: 1500px !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    transform: none !important;
}

/* اللوجو */
#setup-screen .setup-logo {
    width: 100%;
    text-align: center;

    margin: 5px 0 15px !important;
}

#setup-screen .logo-image {
    max-width: 220px !important;
    height: auto;
}

/* اللوحة الرئيسية:
   لم تعد مستطيلاً صغيراً */
#setup-screen .setup-panel {
    width: 100% !important;
    max-width: none !important;

    padding: 22px 28px 28px !important;
    margin: 0 !important;

    box-sizing: border-box;

    background: rgba(4, 35, 78, 0.45) !important;

    border-radius: 24px !important;
}

/* عنوان إعداد المباراة */
#setup-screen .setup-title {
    font-size: 32px !important;
    text-align: center;

    margin: 0 0 24px !important;
}

/* أسماء الفريقين */
#setup-screen .teams-setup {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;

    gap: 25px !important;
    align-items: center !important;

    margin-bottom: 24px !important;
}

#setup-screen .team-input-group {
    width: 100% !important;

    padding: 18px !important;

    border: 2px solid rgba(46, 168, 255, 0.55);
    border-radius: 18px;

    background: rgba(3, 29, 65, 0.72);
}

#setup-screen .team-input-group input {
    width: 100% !important;
    height: 48px !important;

    font-size: 18px !important;

    box-sizing: border-box;
}

/* VS في المنتصف */
#setup-screen .versus-badge {
    width: 60px !important;
    height: 60px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px !important;
}

/* عناوين الأقسام */
#setup-screen .setup-section-title {
    margin: 22px 0 14px !important;
}

#setup-screen .setup-section-title h3 {
    font-size: 24px !important;
}

/* عدد الجولات */
#setup-screen .round-options {
    width: min(750px, 100%) !important;

    margin: 0 auto 28px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    gap: 14px !important;
}

#setup-screen .round-option {
    min-height: 54px !important;

    font-size: 18px !important;
    border-radius: 14px !important;
}

/* أهم جزء:
   الفئات تستغل عرض الصفحة */
#setup-screen .categories-grid {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;

    gap: 14px !important;

    margin: 0 auto 25px !important;
}

/* بطاقة الفئة */
#setup-screen .category-card {
    min-height: 90px !important;

    padding: 14px 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;

    border-radius: 16px !important;

    font-size: 17px !important;
}

#setup-screen .category-icon {
    font-size: 25px !important;
}

#setup-screen .category-name {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* زر بدء المباراة */
#setup-screen .setup-start-btn {
    width: min(520px, 100%) !important;

    min-height: 58px !important;

    margin: 18px auto 8px !important;

    display: block !important;

    font-size: 21px !important;
}
/* إخفاء صفحة الإعداد بعد بدء المباراة */
#setup-screen:not(.active) {
    display: none !important;
}

/* إظهارها فقط عندما تكون الصفحة النشطة */
#setup-screen.active {
    display: block !important;
}
/* =========================================
   ترتيب أعلى صفحة إعداد المباراة
========================================= */

#setup-screen .teams-setup {
    display: grid !important;
    grid-template-columns: 1fr 0.8fr 1fr !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
}

/* الفريق الأول */
#setup-screen .team-input-group:first-child {
    order: 1;
}

/* VS في المنتصف */
#setup-screen .versus-badge {
    order: 2;
    align-self: center;
    justify-self: center;
}

/* الفريق الثاني */
#setup-screen .team-input-group:last-child {
    order: 3;
}

/* جعل بطاقات الفرق أكبر وأوضح */
#setup-screen .team-input-group {
    min-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* عنوان الفريق */
#setup-screen .team-input-group label {
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* خانة الاسم */
#setup-screen .team-input-group input {
    height: 52px !important;
    font-size: 20px !important;
    text-align: center !important;
}

/* دائرة VS */
#setup-screen .versus-badge {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
}
/* =========================================
   بطاقة عدد الجولات
========================================= */

#setup-screen .setup-section-title:has(h3) {
    text-align: center !important;
}

/* منطقة عدد الجولات */
#setup-screen .round-options {
    width: min(760px, 100%) !important;

    margin: 0 auto 30px !important;
    padding: 18px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;

    background: rgba(5, 35, 78, 0.72) !important;
    border: 2px solid rgba(46, 168, 255, 0.45) !important;
    border-radius: 20px !important;

    box-sizing: border-box;
}

/* أزرار الجولات */
#setup-screen .round-option {
    min-height: 60px !important;

    border-radius: 14px !important;
    font-size: 18px !important;
    font-weight: 800 !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#setup-screen .round-option:hover {
    transform: translateY(-2px);
}

/* الجولة المختارة */
#setup-screen .round-option.selected {
    box-shadow:
        0 0 18px rgba(46, 168, 255, 0.7),
        inset 0 0 12px rgba(255, 255, 255, 0.08) !important;
}

/* =========================================
   تحسين بطاقات الفئات
========================================= */

#setup-screen .categories-grid {
    grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
    gap: 16px !important;
}

/* بطاقة كل فئة */
#setup-screen .category-card {
    position: relative !important;

    min-height: 105px !important;

    padding: 18px 16px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    background: rgba(5, 38, 83, 0.78) !important;

    border: 2px solid rgba(46, 168, 255, 0.55) !important;
    border-radius: 18px !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

#setup-screen .category-card:hover {
    transform: translateY(-3px) !important;

    border-color: #2ea8ff !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.22),
        0 0 14px rgba(46, 168, 255, 0.2) !important;
}

/* الأيقونة */
#setup-screen .category-icon {
    font-size: 30px !important;
    line-height: 1 !important;
}

/* اسم الفئة */
#setup-screen .category-name {
    font-size: 19px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

/* الفئة المختارة */
#setup-screen .category-card:has(input:checked) {
    background:
        linear-gradient(
            145deg,
            rgba(27, 107, 226, 0.96),
            rgba(45, 70, 205, 0.96)
        ) !important;

    border-color: #60c7ff !important;

    box-shadow:
        0 0 18px rgba(46, 168, 255, 0.48) !important;
}

/* نخفي مربع checkbox نفسه بصرياً */
#setup-screen .category-card input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================
   أسفل صفحة إعداد المباراة
========================================= */

/* سطر الموسيقى */
#setup-screen .music-option,
#setup-screen .music-toggle,
#setup-screen label:has(input[type="checkbox"]) {
    margin-top: 18px !important;
}

/* زر بدء المباراة */
#setup-screen .setup-start-btn {
    width: min(620px, 100%) !important;
    min-height: 64px !important;

    margin: 24px auto 12px !important;

    display: block !important;

    font-size: 24px !important;
    font-weight: 900 !important;

    border-radius: 16px !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(255, 190, 40, 0.2) !important;
}

/* زر الرجوع */
#setup-screen .setup-back-btn,
#setup-screen .back-btn {
    display: block !important;

    width: fit-content !important;

    margin: 10px auto 0 !important;

    padding: 10px 24px !important;

    font-size: 17px !important;
    font-weight: 700 !important;

    border-radius: 12px !important;
}

/* مسافة آمنة أسفل الصفحة */
#setup-screen .setup-panel {
    padding-bottom: 35px !important;
}

/* =========================================
   التشطيب النهائي لصفحة إعداد المباراة
========================================= */

/* توزيع الصفحة بشكل مريح */
#setup-screen .setup-shell {
    padding-top: 10px !important;
    padding-bottom: 30px !important;
}

/* اللوجو */
#setup-screen .setup-logo {
    margin: 0 auto 8px !important;
}

#setup-screen .logo-image {
    width: 190px !important;
    max-width: 190px !important;
}

/* عنوان إعداد المباراة */
#setup-screen .setup-title {
    margin: 4px 0 18px !important;
    font-size: 30px !important;
}

/* تقليل الفراغات بين الأقسام */
#setup-screen .setup-section-title {
    margin: 16px 0 10px !important;
}

#setup-screen .setup-section-title h3 {
    margin: 0 !important;
}

/* اللوحة الرئيسية أعرض وأخف */
#setup-screen .setup-panel {
    width: 100% !important;
    padding: 20px 26px 30px !important;
}

/* تقليل الفراغ بعد الفرق */
#setup-screen .teams-setup {
    margin-bottom: 14px !important;
}

/* تقليل الفراغ بعد الجولات */
#setup-screen .round-options {
    margin-bottom: 20px !important;
}

/* الفئات */
#setup-screen .categories-grid {
    margin-bottom: 18px !important;
}

/* دعم الشاشات الأصغر */
@media (max-width: 1000px) {

    #setup-screen .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    #setup-screen .teams-setup {
        grid-template-columns: 1fr !important;
    }

    #setup-screen .versus-badge {
        margin: 0 auto !important;
    }
}

@media (max-width: 650px) {

    #setup-screen {
        padding: 12px !important;
    }

    #setup-screen .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   مؤثرات بصرية لبطاقات الفئات
========================================= */

#setup-screen .category-card {
    position: relative !important;
    overflow: hidden !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        filter 0.18s ease !important;
}

/* نقاط زخرفية خفيفة داخل البطاقة */
#setup-screen .category-card::before {
    content: "";
    position: absolute;

    left: 14px;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    opacity: 0.18;

    background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 3px);

    background-size: 10px 10px;

    pointer-events: none;
}

/* Hover */
#setup-screen .category-card:hover {
    transform: translateY(-4px) scale(1.025) !important;

    filter: brightness(1.08) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(46, 168, 255, 0.28) !important;
}

/* حركة ضغط بسيطة */
#setup-screen .category-card:active {
    transform: translateY(-1px) scale(0.985) !important;
}

/* تكبير الأيقونة */
#setup-screen .category-icon {
    font-size: 32px !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

#setup-screen .category-card:hover .category-icon {
    transform: scale(1.12) rotate(-3deg);

    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

/* اسم الفئة */
#setup-screen .category-name {
    position: relative;
    z-index: 2;

    font-weight: 900 !important;
    letter-spacing: 0.2px;
}

/* =========================================
   شكل الفئة المختارة
========================================= */

#setup-screen .category-card:has(input:checked) {
    transform: translateY(-2px) !important;

    border-color: #69d5ff !important;

    box-shadow:
        0 0 0 2px rgba(105, 213, 255, 0.22),
        0 0 22px rgba(46, 168, 255, 0.55),
        inset 0 0 18px rgba(255, 255, 255, 0.06) !important;
}

/* علامة الصح */
#setup-screen .category-card:has(input:checked)::after {
    content: "✓";

    position: absolute;

    top: 9px;
    right: 10px;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1597ff;
    border: 2px solid #9ee4ff;

    color: #ffffff;

    font-size: 16px;
    font-weight: 900;

    box-shadow:
        0 0 12px rgba(46, 168, 255, 0.7);

    z-index: 4;

    animation: categoryCheckPop 0.25s ease;
}

/* حركة ظهور علامة الصح */
@keyframes categoryCheckPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* توهج خفيف مستمر للفئة المختارة */
#setup-screen .category-card:has(input:checked) .category-icon {
    animation: selectedCategoryIcon 1.8s ease-in-out infinite;
}

@keyframes selectedCategoryIcon {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* =========================================
   زر ابدأ المباراة - PuzzGo
========================================= */

#setup-screen .setup-start-btn {
    position: relative !important;
    overflow: hidden !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease !important;

    box-shadow:
        0 7px 0 rgba(150, 90, 0, 0.45),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(255, 190, 35, 0.25) !important;
}

/* لمعان يمر فوق الزر */
#setup-screen .setup-start-btn::before {
    content: "";
    position: absolute;

    top: -50%;
    left: -35%;

    width: 22%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.65),
        transparent
    );

    transform: rotate(20deg);

    animation: puzzgoStartShine 3.2s ease-in-out infinite;

    pointer-events: none;
}

/* عند مرور الماوس */
#setup-screen .setup-start-btn:hover {
    transform: translateY(-4px) scale(1.015) !important;

    filter: brightness(1.08);

    box-shadow:
        0 9px 0 rgba(150, 90, 0, 0.42),
        0 16px 30px rgba(0, 0, 0, 0.30),
        0 0 30px rgba(255, 193, 35, 0.48) !important;
}

/* عند الضغط */
#setup-screen .setup-start-btn:active {
    transform: translateY(4px) scale(0.99) !important;

    box-shadow:
        0 2px 0 rgba(150, 90, 0, 0.50),
        0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* حركة اللمعة */
@keyframes puzzgoStartShine {
    0% {
        left: -35%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    40% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

/* =========================================
   تحسين أزرار عدد الجولات
========================================= */

#setup-screen .round-option {
    position: relative !important;
    overflow: hidden !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        filter 0.22s ease !important;
}

/* عند مرور الماوس */
#setup-screen .round-option:hover {
    transform: translateY(-3px) scale(1.02) !important;
    filter: brightness(1.08) !important;

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.25),
        0 0 18px rgba(46, 168, 255, 0.28) !important;
}

/* إحساس الضغط */
#setup-screen .round-option:active {
    transform: translateY(1px) scale(0.98) !important;
}

/* الخيار المحدد */
#setup-screen .round-option:has(input:checked) {
    border-color: #66d7ff !important;

    background:
        linear-gradient(
            145deg,
            rgba(22, 125, 235, 0.96),
            rgba(45, 72, 210, 0.96)
        ) !important;

    box-shadow:
        0 0 0 2px rgba(102, 215, 255, 0.20),
        0 0 22px rgba(46, 168, 255, 0.55),
        inset 0 0 16px rgba(255, 255, 255, 0.06) !important;
}

/* علامة الصح */
#setup-screen .round-option:has(input:checked)::after {
    content: "✓";

    position: absolute;
    top: 8px;
    right: 10px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #15a0ff;
    border: 2px solid #a3e7ff;

    color: white;
    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 0 12px rgba(46, 168, 255, 0.75);

    animation: roundCheckPop 0.22s ease;
}

/* إخفاء زر الراديو نفسه */
#setup-screen .round-option input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes roundCheckPop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* =========================================
   تحسين حقول أسماء الفريقين
========================================= */

#setup-screen .team-input-group {
    position: relative !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

/* عند المرور */
#setup-screen .team-input-group:hover {
    transform: translateY(-2px);

    border-color: rgba(80, 190, 255, 0.85) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(46, 168, 255, 0.18);
}

/* عندما يكون المؤشر داخل خانة الاسم */
#setup-screen .team-input-group:focus-within {
    transform: translateY(-3px) scale(1.01);

    border-color: #58c8ff !important;

    box-shadow:
        0 0 0 2px rgba(88, 200, 255, 0.15),
        0 0 24px rgba(46, 168, 255, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.26);
}

/* خانة الاسم */
#setup-screen .team-input-group input {
    border: 2px solid rgba(110, 205, 255, 0.35) !important;

    background:
        rgba(4, 25, 58, 0.85) !important;

    color: white !important;

    border-radius: 14px !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
}

#setup-screen .team-input-group input:focus {
    outline: none !important;

    border-color: #5acbff !important;

    background:
        rgba(6, 39, 82, 0.96) !important;

    box-shadow:
        inset 0 0 12px rgba(46, 168, 255, 0.10),
        0 0 14px rgba(46, 168, 255, 0.22) !important;
}

/* النص الافتراضي */
#setup-screen .team-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* عنوان الفريق */
#setup-screen .team-input-group label {
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease !important;
}

#setup-screen .team-input-group:focus-within label {
    color: #8edcff !important;

    text-shadow:
        0 0 10px rgba(46, 168, 255, 0.35);
}
/* =========================================
   مؤثرات خلفية صفحة إعداد المباراة
========================================= */

/* توهج ناعم خلف الصفحة */
#setup-screen::before {
    content: "";
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(32, 133, 255, 0.13),
            transparent 42%
        ),
        radial-gradient(
            circle at 15% 75%,
            rgba(70, 75, 255, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(0, 200, 255, 0.07),
            transparent 32%
        );

    pointer-events: none;
    z-index: 0;

    animation: setupBackgroundGlow 8s ease-in-out infinite alternate;
}

/* المحتوى يبقى فوق المؤثر */
#setup-screen .setup-shell {
    position: relative;
    z-index: 2;
}

/* حركة هادئة لقطع البازل الموجودة بالخلفية */
#setup-screen .setup-floating-puzzles {
    animation: setupPuzzleFloat 7s ease-in-out infinite;
}

/* نبض الإضاءة */
@keyframes setupBackgroundGlow {
    0% {
        opacity: 0.65;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* حركة بسيطة جدًا */
@keyframes setupPuzzleFloat {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}
/* =========================================
   حركة دخول صفحة إعداد المباراة
========================================= */

#setup-screen.active .setup-logo {
    animation: setupLogoEnter 0.55s ease both;
}

#setup-screen.active .setup-title {
    animation: setupItemEnter 0.50s ease 0.08s both;
}

#setup-screen.active .teams-setup {
    animation: setupItemEnter 0.50s ease 0.14s both;
}

#setup-screen.active .round-options {
    animation: setupItemEnter 0.50s ease 0.20s both;
}

#setup-screen.active .categories-grid {
    animation: setupItemEnter 0.55s ease 0.26s both;
}

#setup-screen.active .setup-start-btn {
    animation: setupItemEnter 0.50s ease 0.34s both;
}

@keyframes setupLogoEnter {
    from {
        opacity: 0;
        transform: translateY(-18px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes setupItemEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   تحسين شكل خيار الموسيقى
========================================= */

#setup-screen .music-option,
#setup-screen .music-toggle,
#setup-screen .music-setting {
    width: min(520px, 100%) !important;

    margin: 14px auto 6px !important;
    padding: 14px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 14px !important;

    background:
        linear-gradient(
            145deg,
            rgba(6, 36, 78, 0.92),
            rgba(8, 53, 105, 0.88)
        ) !important;

    border: 2px solid rgba(75, 180, 255, 0.55) !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.20),
        inset 0 0 14px rgba(255, 255, 255, 0.03) !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

/* Hover */
#setup-screen .music-option:hover,
#setup-screen .music-toggle:hover,
#setup-screen .music-setting:hover {
    transform: translateY(-2px) !important;

    border-color: #55c8ff !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(46, 168, 255, 0.20) !important;
}

/* نص خيار الموسيقى */
#setup-screen .music-option label,
#setup-screen .music-toggle label,
#setup-screen .music-setting label {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

/* أيقونة موسيقى صغيرة قبل النص */
#setup-screen .music-option label::before,
#setup-screen .music-toggle label::before,
#setup-screen .music-setting label::before {
    content: "🎵";
    margin-left: 8px;
    font-size: 20px;
}

/* checkbox */
#setup-screen .music-option input[type="checkbox"],
#setup-screen .music-toggle input[type="checkbox"],
#setup-screen .music-setting input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;

    accent-color: #1597ff !important;

    cursor: pointer !important;
}
/* =========================================
   تصميم خيار موسيقى اللعبة
========================================= */

/* الحاوية التي تحتوي الموسيقى */
#setup-screen div:has(> #bgMusicCheckbox) {
    width: min(520px, 90%) !important;
    margin: 24px auto 20px !important;
    padding: 15px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;

    background: linear-gradient(
        135deg,
        rgba(8, 45, 91, 0.95),
        rgba(12, 65, 125, 0.90)
    ) !important;

    border: 2px solid rgba(64, 180, 255, 0.55) !important;
    border-radius: 18px !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.22),
        inset 0 0 15px rgba(255,255,255,0.03) !important;

    transition: all 0.22s ease !important;
}

/* Hover على الحاوية */
#setup-screen div:has(> #bgMusicCheckbox):hover {
    transform: translateY(-2px);

    border-color: #5acbff !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.25),
        0 0 20px rgba(46,168,255,0.22) !important;
}

/* النص */
#setup-screen label[for="bgMusicCheckbox"] {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: white !important;

    cursor: pointer;
}

/* إضافة أيقونة الموسيقى */

/* نخفي الـ checkbox العادي */
#setup-screen #bgMusicCheckbox {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 54px !important;
    height: 28px !important;

    border-radius: 30px !important;

    background: #263d5d !important;
    border: 2px solid #52779d !important;

    position: relative !important;
    cursor: pointer !important;

    transition: all 0.25s ease !important;
}

/* الدائرة داخل السويتش */
#setup-screen #bgMusicCheckbox::before {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    top: 2px;
    left: 3px;

    border-radius: 50%;

    background: white;

    box-shadow: 0 2px 6px rgba(0,0,0,0.35);

    transition: transform 0.25s ease;
}

/* عند تشغيل الموسيقى */
#setup-screen #bgMusicCheckbox:checked {
    background: linear-gradient(
        90deg,
        #1597ff,
        #355cff
    ) !important;

    border-color: #79dcff !important;

    box-shadow:
        0 0 15px rgba(46,168,255,0.65) !important;
}

/* تحريك الدائرة */
#setup-screen #bgMusicCheckbox:checked::before {
    transform: translateX(25px);
}

/* إضاءة الحاوية عند التشغيل */
#setup-screen div:has(> #bgMusicCheckbox:checked) {
    border-color: #63d5ff !important;

    box-shadow:
        0 0 22px rgba(46,168,255,0.28),
        inset 0 0 18px rgba(46,168,255,0.05) !important;
}
/* ===== أزرار الصفحة الرئيسية ===== */

#start-screen .start-buttons {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;

    width: auto;
    z-index: 50;
}

#start-screen .start-buttons button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    width: 175px !important;
    min-width: 175px !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    border-radius: 15px !important;
    font-family: "Cairo", sans-serif;
    font-size: 18px !important;
    font-weight: 800;
    cursor: pointer;
}

/* زر شرح اللعبة */
#start-screen #btn-how-to-play {
    background: linear-gradient(180deg, #168fe3, #07589f) !important;
    color: #fff !important;
    border: 2px solid #42c5ff !important;

    box-shadow:
        0 6px 0 #063c70,
        0 8px 18px rgba(0, 145, 255, .28);
}

/* زر بدء اللعبة */
#start-screen #btn-new-game {
    background: linear-gradient(180deg, #ffd04b, #ffad12) !important;
    color: #201600 !important;

    box-shadow:
        0 6px 0 #a76c00,
        0 8px 20px rgba(255, 177, 0, .30);
}

/* حركة بسيطة */
#start-screen .start-buttons button:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.08);
}
#start-screen .start-buttons button {
    width: 165px !important;
    min-width: 165px !important;
    height: 50px !important;

    padding: 0 12px !important;

    font-size: 16px !important;

    white-space: nowrap !important;
}

#start-screen .start-buttons {
    gap: 12px !important;
    bottom: 14px !important;
}

/* =====================================================
   صفحة شرح لعبة PuzzGo
===================================================== */

.game-guide-overlay {
    position: fixed;
    inset: 0;

    z-index: 999999;

    background:
        radial-gradient(circle at top, rgba(32, 123, 255, 0.18), transparent 35%),
        rgba(2, 13, 35, 0.96);

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 22px;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;
}

.game-guide-overlay.hidden {
    display: none !important;
}


/* الصفحة الرئيسية للشرح */
.game-guide-page {
    position: relative;

    width: min(1100px, 96vw);

    margin: 18px auto 40px;
    padding: 34px;

    direction: rtl;

    background:
        linear-gradient(
            160deg,
            rgba(7, 44, 92, 0.98),
            rgba(8, 31, 69, 0.98)
        );

    border: 2px solid rgba(65, 178, 255, 0.75);
    border-radius: 26px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45),
        0 0 35px rgba(46, 168, 255, 0.16);

    color: #fff;

    box-sizing: border-box;
}


/* زر الإغلاق */
.game-guide-close {
    position: sticky;
    top: 0;
    float: left;

    width: 48px;
    height: 48px;

    margin-bottom: -48px;

    border: none;
    border-radius: 50%;

    background: linear-gradient(145deg, #f34954, #ca2533);

    color: white;

    font-size: 25px;
    font-weight: 900;

    cursor: pointer;

    z-index: 100;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.game-guide-close:hover {
    transform: scale(1.08) rotate(5deg);
    filter: brightness(1.08);
}


/* =====================================================
   رأس الصفحة
===================================================== */

.game-guide-header {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 15px 70px 28px;

    text-align: center;

    border-bottom: 1px solid rgba(92, 189, 255, 0.25);
}

.game-guide-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    font-size: 38px;

    background:
        linear-gradient(145deg, #168fe3, #07589f);

    box-shadow:
        0 0 24px rgba(46, 168, 255, 0.32);
}

.game-guide-header h1 {
    margin: 0;

    font-size: 34px;
    font-weight: 900;

    color: white;
}

.game-guide-header p {
    margin: 7px 0 0;

    font-size: 17px;

    color: #a9dcff;
}


/* =====================================================
   الأقسام
===================================================== */

.guide-section {
    margin-top: 24px;
    padding: 22px;

    background:
        rgba(3, 28, 66, 0.58);

    border: 1px solid rgba(65, 178, 255, 0.30);
    border-radius: 20px;

    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.015);
}

.guide-section h2 {
    margin: 0 0 18px;

    font-size: 24px;
    font-weight: 900;

    color: #ffffff;
}

.guide-section-intro {
    margin: -5px 0 18px;

    color: #b9dfff;

    line-height: 1.9;
}


/* =====================================================
   خطوات طريقة اللعب
===================================================== */

.guide-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.guide-step {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 57, 115, 0.88),
            rgba(5, 41, 89, 0.88)
        );

    border: 1px solid rgba(73, 186, 255, 0.45);
    border-radius: 16px;
}

.guide-step-number {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(145deg, #1597ff, #3857e7);

    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 0 14px rgba(46, 168, 255, 0.4);
}

.guide-step h3 {
    margin: 0 0 5px;

    font-size: 18px;
}

.guide-step p {
    margin: 0;

    color: #c4def4;

    line-height: 1.8;
}


/* =====================================================
   البطاقات العامة
===================================================== */

.guide-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.guide-cards.two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.guide-info-card {
    padding: 17px 18px;

    background:
        rgba(5, 47, 98, 0.8);

    border: 1px solid rgba(74, 181, 255, 0.42);
    border-radius: 16px;

    line-height: 1.9;
}

.guide-info-card h3 {
    margin: 0 0 7px;

    font-size: 18px;
}

.guide-info-card p {
    margin: 5px 0;

    color: #d1e6f8;
}


/* الصحيح */
.guide-info-card.success {
    border-color: rgba(42, 213, 126, 0.62);

    background:
        linear-gradient(
            145deg,
            rgba(7, 82, 67, 0.72),
            rgba(5, 48, 76, 0.86)
        );
}


/* الخطأ */
.guide-info-card.danger {
    border-color: rgba(255, 78, 86, 0.62);

    background:
        linear-gradient(
            145deg,
            rgba(100, 35, 55, 0.72),
            rgba(5, 48, 76, 0.86)
        );
}


/* الجولة الذهبية */
.guide-info-card.gold {
    border-color: rgba(255, 195, 54, 0.78);

    background:
        linear-gradient(
            145deg,
            rgba(105, 72, 10, 0.62),
            rgba(5, 47, 98, 0.88)
        );

    box-shadow:
        0 0 18px rgba(255, 190, 40, 0.12);
}


/* =====================================================
   جدول النقاط
===================================================== */

.guide-points-table {
    overflow: hidden;

    border: 1px solid rgba(75, 182, 255, 0.45);
    border-radius: 16px;
}

.guide-points-row {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);

    text-align: center;
}

.guide-points-row span {
    padding: 13px 9px;

    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-points-row span:last-child {
    border-left: none;
}

.guide-points-head {
    background:
        linear-gradient(90deg, #0d63ae, #1c78cf);

    font-weight: 900;
}

.guide-points-row:not(.guide-points-head) {
    background:
        rgba(4, 35, 76, 0.72);
}

.guide-note {
    margin: 14px 0 0;

    padding: 12px 15px;

    background:
        rgba(255, 190, 38, 0.10);

    border: 1px solid rgba(255, 195, 63, 0.34);
    border-radius: 12px;

    color: #ffe7a3;
}


/* =====================================================
   الفئات
===================================================== */

.guide-categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 10px;
}

.guide-categories span {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px;

    background:
        rgba(4, 42, 89, 0.9);

    border: 1px solid rgba(64, 182, 255, 0.45);
    border-radius: 13px;

    font-weight: 800;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.guide-categories span:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 14px rgba(46, 168, 255, 0.20);
}


/* =====================================================
   وسائل المساعدة
===================================================== */

.guide-help-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 14px;
}

.guide-help-card {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 54, 106, 0.90),
            rgba(3, 37, 80, 0.90)
        );

    border: 1px solid rgba(64, 185, 255, 0.48);
    border-radius: 16px;
}

.guide-help-icon {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        rgba(15, 119, 213, 0.65);

    font-size: 26px;
    font-weight: 900;

    box-shadow:
        inset 0 0 13px rgba(255, 255, 255, 0.08);
}

.guide-help-card h3 {
    margin: 0 0 5px;
}

.guide-help-card p {
    margin: 0;

    color: #c6def2;

    line-height: 1.7;
}


/* =====================================================
   النصائح
===================================================== */

.guide-tips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
}

.guide-tips p {
    margin: 0;

    padding: 13px 15px;

    background:
        rgba(4, 43, 92, 0.82);

    border-radius: 13px;

    color: #d5eafa;
}


/* =====================================================
   نهاية صفحة الشرح
===================================================== */

.guide-final-section {
    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(13, 84, 151, 0.78),
            rgba(7, 49, 100, 0.88)
        );
}

.guide-final-section p {
    color: #d9efff;

    font-size: 17px;
    line-height: 1.9;
}

.game-guide-start-btn {
    position: relative;
    overflow: hidden;

    min-width: 310px;
    min-height: 60px;

    margin-top: 12px;
    padding: 0 28px;

    border: 2px solid #ffe68a;
    border-radius: 16px;

    background:
        linear-gradient(180deg, #ffd650, #ffad13);

    color: #261800;

    font-family: "Cairo", sans-serif;
    font-size: 21px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 0 #a66a00,
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(255, 190, 35, 0.24);

    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.game-guide-start-btn:hover {
    transform: translateY(-3px);

    filter: brightness(1.08);
}

.game-guide-start-btn:active {
    transform: translateY(3px);
}


/* =====================================================
   Scrollbar
===================================================== */

.game-guide-overlay::-webkit-scrollbar {
    width: 10px;
}

.game-guide-overlay::-webkit-scrollbar-track {
    background: #061a3a;
}

.game-guide-overlay::-webkit-scrollbar-thumb {
    background:
        linear-gradient(#1597ff, #3157db);

    border-radius: 10px;
}


/* =====================================================
   الشاشات الأصغر
===================================================== */

@media (max-width: 850px) {

    .game-guide-page {
        padding: 22px 16px;
    }

    .guide-steps,
    .guide-cards,
    .guide-cards.two-columns,
    .guide-help-grid,
    .guide-tips {
        grid-template-columns: 1fr;
    }

    .guide-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .guide-points-row {
        grid-template-columns: 1fr;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .guide-points-row span {
        border-left: none;
    }

    .game-guide-header {
        flex-direction: column;
        padding: 15px 45px 22px;
    }
}
/* =====================================================
   خلفية حيوية لصفحة شرح PuzzGo
===================================================== */

.game-guide-overlay {
    position: fixed;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(31, 146, 255, 0.30),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(80, 92, 255, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(0, 196, 255, 0.15),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #03152f 0%,
            #062b59 48%,
            #041936 100%
        ) !important;

    background-attachment: fixed;

    animation: guideBackgroundMove 10s ease-in-out infinite alternate;
}


/* إضاءة خلفية متحركة */
.game-guide-overlay::before {
    content: "";

    position: fixed;
    inset: -15%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 35% 40%,
            rgba(47, 168, 255, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 70% 65%,
            rgba(95, 85, 255, 0.12),
            transparent 30%
        );

    filter: blur(20px);

    animation: guideLightFloat 9s ease-in-out infinite alternate;

    z-index: 0;
}


/* قطع بازل زخرفية بالخلفية */
.game-guide-overlay::after {
    content: "🧩     🧩     🧩";

    position: fixed;

    top: 12%;
    left: 0;

    width: 100%;

    color: rgba(255, 255, 255, 0.07);

    font-size: 85px;
    letter-spacing: 160px;

    white-space: nowrap;

    pointer-events: none;

    filter:
        drop-shadow(0 0 18px rgba(52, 170, 255, 0.18));

    animation: guidePuzzleFloat 12s ease-in-out infinite;

    z-index: 0;
}


/* الصفحة نفسها تصبح Glass بدل مستطيل كحلي ثقيل */
.game-guide-page {
    position: relative;
    z-index: 2;

    background:
        linear-gradient(
            145deg,
            rgba(6, 39, 82, 0.88),
            rgba(4, 24, 57, 0.84)
        ) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border:
        1px solid rgba(91, 195, 255, 0.55) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 45px rgba(46, 168, 255, 0.12),
        inset 0 0 30px rgba(255, 255, 255, 0.025) !important;
}


/* إضاءة خفيفة خلف رأس الصفحة */
.game-guide-header {
    position: relative;
}

.game-guide-header::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 150px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse,
            rgba(46, 168, 255, 0.18),
            transparent 70%
        );

    filter: blur(15px);

    pointer-events: none;

    z-index: -1;
}


/* حركة الخلفية */
@keyframes guideBackgroundMove {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            center;
    }

    100% {
        background-position:
            5% 8%,
            92% 8%,
            55% 92%,
            center;
    }
}


/* حركة الإضاءة */
@keyframes guideLightFloat {
    0% {
        transform: translate(-2%, -2%) scale(1);
        opacity: 0.65;
    }

    100% {
        transform: translate(3%, 3%) scale(1.08);
        opacity: 1;
    }
}


/* حركة قطع البازل */
@keyframes guidePuzzleFloat {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
        opacity: 0.45;
    }

    50% {
        transform: translateY(28px) rotate(3deg);
        opacity: 0.75;
    }
}

/* ==========================================
   السؤال النموذجي الخاص بكل فئة
========================================== */

/* علامة الاستفهام أسفل يسار بطاقة الفئة */
#setup-screen .category-help-button {
    position: absolute;
    left: 9px;
    bottom: 9px;

    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(118, 203, 255, 0.85);
    border-radius: 50%;

    background: rgba(3, 25, 62, 0.92);
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;
    z-index: 10;

    box-shadow:
        0 0 8px rgba(46, 168, 255, 0.45);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

#setup-screen .category-help-button:hover {
    transform: scale(1.13);
    background: #168fe9;

    box-shadow:
        0 0 13px rgba(80, 190, 255, 0.85);
}

/* خلفية نافذة السؤال */
.category-example-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(1, 10, 28, 0.82);
    backdrop-filter: blur(5px);

    z-index: 10000;
}

.category-example-modal.hidden {
    display: none !important;
}

/* صندوق السؤال */
.category-example-box {
    position: relative;

    width: min(520px, 94%);
    padding: 34px 28px 26px;

    border: 2px solid #2ea8ff;
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #0b3470,
            #061a3f
        );

    color: #ffffff;
    text-align: center;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.48),
        0 0 25px rgba(46, 168, 255, 0.35);
}

/* زر إغلاق النافذة */
.category-example-close {
    position: absolute;
    top: 10px;
    left: 12px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    font-size: 25px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;
}

.category-example-close:hover {
    background: #e54b5f;
}

/* عبارة سؤال نموذجي */
.category-example-badge {
    display: inline-block;

    margin-bottom: 13px;
    padding: 7px 16px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #ffd45b,
            #ee9d08
        );

    color: #4a2b00;
    font-size: 15px;
    font-weight: 900;
}

#category-example-title {
    margin: 0 0 18px;

    color: #76cbff;
    font-size: 27px;
}

#category-example-question {
    margin: 0 0 16px;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.7;
}

/* الإجابة النموذجية */
.category-example-answer {
    margin: 0 auto 17px;
    padding: 13px 18px;

    border: 1px solid rgba(118, 203, 255, 0.55);
    border-radius: 13px;

    background: rgba(6, 24, 58, 0.72);

    color: #ffe28a;
    font-size: 19px;
    font-weight: 800;
}

/* الملاحظة الثابتة */
.category-example-note {
    margin: 0;

    color: #c9d9ee;
    font-size: 14px;
}

/* صورة السؤال النموذجي لفئة الأعلام */
.category-example-image {
    display: block;

    width: min(230px, 75%);
    max-height: 145px;

    margin: 0 auto 18px;

    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;

    object-fit: contain;

background: transparent;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.3);
}

.category-example-image.hidden {
    display: none !important;
}

/* فيديو السؤال النموذجي لفئة ركّز */
.category-example-video {
    display: block;

    width: min(430px, 95%);
    max-height: 245px;

    margin: 0 auto 18px;

    border: 2px solid rgba(118, 203, 255, 0.75);
    border-radius: 14px;

    background: #000000;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.38);

    object-fit: contain;
}

.category-example-video.hidden {
    display: none !important;
}

/* ==========================================
   نموذج فئة اكتشف الفرق
========================================== */

/* توسيع النافذة عند ظهور صورتَي الفروقات */
.category-example-box:has(
    .category-example-pair:not(.hidden)
) {
    width: min(980px, 96%);
}

/* حاوية الصورتين */
.category-example-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    width: 100%;
    margin: 0 auto 18px;
}

.category-example-pair.hidden {
    display: none !important;
}

/* شكل الصورتين */
.category-example-pair img {
    display: block;

    width: 100%;
    height: 230px;

    border: 2px solid rgba(118, 203, 255, 0.75);
    border-radius: 13px;

    object-fit: cover;
    background: transparent;

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.34);
}

/* الشاشات الصغيرة */
@media (max-width: 700px) {
    .category-example-pair {
        grid-template-columns: 1fr;
    }

    .category-example-pair img {
        height: auto;
        max-height: 230px;
        object-fit: contain;
    }
}

/* شعار PuzzGo داخل صفحة شرح اللعبة */
.game-guide-logo {
    width: 105px;
    height: 105px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid rgba(118, 203, 255, 0.65);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 70, 140, 0.95),
            rgba(4, 25, 65, 0.98)
        );

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(46, 168, 255, 0.25);

    overflow: hidden;
}

.game-guide-logo img {
    display: block;

    width: 92%;
    height: 92%;

    object-fit: contain;
}

/* تصغير الشعار قليلًا على الهاتف */
@media (max-width: 600px) {
    .game-guide-logo {
        width: 82px;
        height: 82px;
    }
}

/* ترتيب رأس صفحة شرح اللعبة */
.game-guide-header {
    display: grid !important;
    grid-template-columns: 140px 1fr 140px !important;
    align-items: center !important;
    gap: 20px !important;
}

/* شخصية PuzzGo التي تشرح */
.game-guide-character {
    width: 140px;
    height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* صورة الشخصية */
.game-guide-character img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.30))
        drop-shadow(0 0 12px rgba(46, 168, 255, 0.25));
}

/* الكلام يبقى في المنتصف */
.game-guide-header > div:nth-child(2) {
    text-align: center;
}

/* الهاتف */
@media (max-width: 700px) {
    .game-guide-header {
        grid-template-columns: 75px 1fr 85px !important;
        gap: 8px !important;
        padding: 15px 10px 22px !important;
    }

    .game-guide-character {
        width: 85px;
        height: 85px;
    }
}

/* فرض ظهور شخصية PuzzGo في يسار رأس الشرح */
.game-guide-header .game-guide-character {
    grid-column: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 150px !important;
    height: 150px !important;

    opacity: 1 !important;
    visibility: visible !important;

    position: relative !important;
    z-index: 5 !important;
}

.game-guide-header .game-guide-character img {
    display: block !important;

    width: 150px !important;
    height: 150px !important;

    max-width: none !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* تثبيت الشعار يمينًا */
.game-guide-header .game-guide-logo {
    grid-column: 3 !important;
}

/* تثبيت الكلام في المنتصف */
.game-guide-header > div:nth-child(2) {
    grid-column: 2 !important;
    text-align: center !important;
}

/* التصحيح النهائي لرأس صفحة الشرح */
.game-guide-header {
    display: grid !important;

    grid-template-columns:
        150px
        minmax(0, 1fr)
        150px !important;

    grid-template-rows: 160px !important;

    align-items: center !important;
    gap: 20px !important;

    direction: rtl !important;
}

/* الشعار: يمين وفي الصف الأول */
.game-guide-header .game-guide-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;

    justify-self: center !important;
    align-self: center !important;
    transform: translateX(-70px) !important;
}

/* الكلام: المنتصف وفي الصف الأول */
.game-guide-header > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: stretch !important;
    align-self: center !important;

    text-align: center !important;
}

/* الشخصية: يسار وفي الصف الأول */
.game-guide-header .game-guide-character {
    grid-column: 3 !important;
    grid-row: 1 !important;

    justify-self: center !important;
    align-self: center !important;

    width: 150px !important;
    height: 150px !important;
transform: translateX(90px) !important;
}

/* ==========================================
   مؤثرات الاحتفال في شاشة نهاية المباراة
========================================== */

/* طبقة المؤثرات */
.match-end-effects {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 1;
}

/* إبقاء بطاقة النتيجة فوق المؤثرات */
.match-end-card {
    position: relative;
    z-index: 2;
}

/* ==========================================
   قصاصات الزينة
========================================== */

.match-end-confetti {
    position: absolute;

    left: var(--confetti-x);
    top: -35px;

    width: 11px;
    height: 18px;

    border-radius: 3px;

    opacity: 0;

    animation:
        matchEndConfettiFall
        var(--confetti-duration)
        linear
        var(--confetti-delay)
        forwards;
}

.match-end-confetti:nth-child(3n) {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.match-end-confetti:nth-child(4n) {
    width: 15px;
    height: 7px;

    border-radius: 2px;
}

@keyframes matchEndConfettiFall {
    0% {
        opacity: 0;

        transform:
            translate3d(0, -30px, 0)
            rotate(0deg);
    }

    8% {
        opacity: 1;
    }

    100% {
        opacity: 0.95;

        transform:
            translate3d(
                var(--confetti-drift),
                110vh,
                0
            )
            rotate(
                var(--confetti-rotation)
            );
    }
}

/* ==========================================
   الألعاب النارية
========================================== */

.match-end-firework {
    position: absolute;

    width: 8px;
    height: 8px;

    pointer-events: none;
}

.match-end-firework::before {
    content: "";

    position: absolute;
    inset: -6px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 15px #ffffff,
        0 0 28px #ffd43b;

    opacity: 0;

    animation:
        matchEndFireworkFlash
        1.3s
        ease-out
        var(--firework-delay)
        3;
}

.match-end-firework span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 17px;

    border-radius: 5px;

    background:
        var(--spark-color);

    box-shadow:
        0 0 9px
        var(--spark-color);

    transform-origin: center bottom;

    opacity: 0;

    animation:
        matchEndFireworkSpark
        1.3s
        ease-out
        var(--firework-delay)
        3;
}

@keyframes matchEndFireworkFlash {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }

    12% {
        opacity: 1;
        transform: scale(1.25);
    }

    35%,
    100% {
        opacity: 0;
        transform: scale(0.2);
    }
}

@keyframes matchEndFireworkSpark {
    0% {
        opacity: 0;

        transform:
            rotate(var(--spark-angle))
            translateY(0)
            scaleY(0.3);
    }

    12% {
        opacity: 1;
    }

    70% {
        opacity: 1;

        transform:
            rotate(var(--spark-angle))
            translateY(
                calc(
                    var(--spark-distance) * -1
                )
            )
            scaleY(1);
    }

    100% {
        opacity: 0;

        transform:
            rotate(var(--spark-angle))
            translateY(
                calc(
                    var(--spark-distance) * -1.15
                )
            )
            scaleY(0.25);
    }
}

/* ==========================================
   توهج بطاقة النتيجة
========================================== */

.match-end-card.match-end-card-celebrating {
    animation:
        matchEndAppear 0.35s ease,
        matchEndWinnerGlow
        1.3s
        ease-in-out
        0.35s
        infinite
        alternate !important;
}

@keyframes matchEndWinnerGlow {
    from {
        box-shadow:
            0 22px 55px rgba(0, 0, 0, 0.38),
            0 0 18px rgba(245, 184, 46, 0.45);

        transform: scale(1);
    }

    to {
        box-shadow:
            0 24px 65px rgba(0, 0, 0, 0.42),
            0 0 38px rgba(255, 201, 70, 0.90),
            0 0 65px rgba(46, 168, 255, 0.35);

        transform: scale(1.018);
    }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .match-end-confetti,
    .match-end-firework::before,
    .match-end-firework span,
    .match-end-card.match-end-card-celebrating {
        animation: none !important;
    }
}

/* حركة شريط التحميل في الصفحة الأولى */
.start-loading-animation {
    position: absolute;
    left: 50%;
    bottom: 81px;
    transform: translateX(-50%);
    width: min(335px, 68%);
    height: 22px;
    background: #eef3fb;
    border: 3px solid white;
    border-radius: 50px;
    overflow: visible;
    z-index: 40;
    pointer-events: none;
    box-sizing: border-box;
}

.start-loading-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #108de0, #035bb5);
    animation: startLoadingFill 8s ease-out forwards;
}

.start-loading-piece {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
    line-height: 1;
    z-index: 2;
    animation: startLoadingPiece 8s ease-out forwards;
}

@keyframes startLoadingFill {
    from {
        width: 0;
    }

    to {
        width: calc(100% - 4px);
    }
}

@keyframes startLoadingPiece {
    from {
        left: 2px;
    }

    to {
        left: calc(100% - 2px);
    }
}
/* ==================================================
   شاشة لعبة اكتشف الفرق
================================================== */

.differences-question-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    background:
        radial-gradient(circle at top, #173d7a, #07152f 65%);
    overflow-y: auto;
    padding: 14px;
    box-sizing: border-box;
}

.differences-question-overlay.hidden {
    display: none;
}

.differences-question-page {
    width: 100%;
    min-height: calc(100vh - 28px);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}

.differences-question-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 6px;
}

.differences-question-header h2 {
    margin: 0;
    color: #ffd84d;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.differences-timer {
    padding: 8px 18px;
    border: 2px solid #55b8ff;
    border-radius: 14px;
    background: rgba(0, 81, 170, 0.8);
    font-size: 1.2rem;
    font-weight: bold;
}

#differences-timer-text {
    color: #ffd84d;
    font-size: 1.5rem;
}

.differences-question-instruction {
    margin: 6px 0 12px;
    color: #ffffff;
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-weight: bold;
}

.differences-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.differences-image-box {
    min-width: 0;
    padding: 7px;
    border: 3px solid rgba(255, 216, 77, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.differences-image-box h3 {
    margin: 0 0 6px;
    color: #ffd84d;
    font-size: 1.05rem;
}

.differences-image-box img {
    display: block;
    width: 100%;
    height: min(67vh, 720px);
    object-fit: contain;
    border-radius: 10px;
    background: #07152f;
}

.differences-show-answer {
    display: block;
    margin: 14px auto 4px;
    padding: 12px 32px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffcf33, #ff8a00);
    color: #17203b;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 145, 0, 0.35);
}

.differences-answer-area {
    width: 100%;
    max-width: 1200px;
    margin: 22px auto 35px;
    padding: 18px;
    box-sizing: border-box;
    border: 3px solid #36d67a;
    border-radius: 18px;
    background: rgba(7, 25, 58, 0.96);
}

.differences-answer-area.hidden {
    display: none;
}

.differences-answer-area h2 {
    margin: 0 0 14px;
    color: #53ed91;
}

#differences-answer-image {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 12px;
}

.differences-judgement-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.differences-judgement-buttons button {
    min-width: 180px;
    padding: 13px 22px;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.05rem;
    font-weight: 900;
    cursor: pointer;
}

#differences-correct-button {
    background: #18a957;
}

#differences-wrong-button {
    background: #d9364b;
}

/* في الشاشات الصغيرة تبقى الصورتان بجانب بعضهما */
@media (max-width: 700px) {
    .differences-question-overlay {
        padding: 6px;
    }

    .differences-question-page {
        padding: 8px;
    }

    .differences-question-header {
        gap: 8px;
        flex-wrap: wrap;
    }

    .differences-images {
        gap: 6px;
    }

    .differences-image-box {
        padding: 4px;
        border-width: 2px;
    }

    .differences-image-box h3 {
        font-size: 0.85rem;
    }

    .differences-image-box img {
        height: 55vh;
    }

    .differences-judgement-buttons {
        flex-direction: column;
    }
}

/* ==========================================
   تكبير صورة البازل فقط إلى 130%
   دون تكبير اللوحة أو قطع البازل
========================================== */
#game-screen .puzzle-image > #puzzle-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
}
/* =========================================================
   حساب PuzzGo والمتجر — معزول عن بقية شاشات اللعبة
   ========================================================= */
.pg-account-entry {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0b5275, #19b8c7) !important;
    color: #fff !important;
}

.pg-account-entry > span:last-child { display: grid; line-height: 1.15; }
.pg-account-entry strong { font-size: 1rem; }
.pg-account-entry small { margin-top: 4px; font-size: .68rem; color: #d8fbff; }
.pg-account-entry-icon { font-size: 1.35rem; }

.pg-account-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(3, 12, 30, .78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pg-account-overlay.hidden { display: none !important; }

.pg-account-modal {
    position: relative;
    width: min(940px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 30px;
    color: #10223b;
    background:
        radial-gradient(circle at 90% -10%, rgba(32,190,205,.18), transparent 34%),
        linear-gradient(160deg, #ffffff 0%, #f4f8ff 100%);
    box-shadow: 0 35px 90px rgba(0,0,0,.42), inset 0 1px 0 #fff;
    animation: pgAccountIn .32s cubic-bezier(.2,.8,.2,1);
}

@keyframes pgAccountIn {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pg-account-close {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    color: #33445b;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(17,41,75,.12);
    font: 700 28px/1 Cairo, sans-serif;
    cursor: pointer;
}

.pg-account-hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 34px 12px;
    color: #fff;
    background: linear-gradient(125deg, #082d54, #08698b 58%, #1cb9c6);
    border-radius: 30px 30px 0 0;
}

.pg-account-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto;
    text-align: center;
}

.pg-account-brand img {
    width: 92px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.2));
}

.pg-account-brand h2 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.1;
}
.pg-balance-card {
    display: grid;
    gap: 3px;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    background: rgba(255,255,255,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.pg-balance-card span { font-size: .78rem; color: #c9f6f9; }
.pg-balance-card strong { color: #ffd75e; font-size: 1.5rem; }
.pg-balance-card small { color: #e8fbff; font-size: .7rem; }

.pg-account-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 22px 30px 0;
    padding: 6px;
    border-radius: 18px;
    background: #e9eef6;
}
.pg-account-tab {
    border: 0;
    border-radius: 13px;
    padding: 13px 10px;
    color: #657086;
    background: transparent;
    font: 800 .95rem Cairo, sans-serif;
    cursor: pointer;
    transition: .2s ease;
}
.pg-account-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #08698b, #22bdc8);
    box-shadow: 0 8px 20px rgba(10,128,155,.22);
}

.pg-account-content { padding: 26px 30px 30px; }
.pg-account-panel { display: none; }
.pg-account-panel.active { display: block; animation: pgPanelIn .22s ease; }
@keyframes pgPanelIn { from { opacity: 0; transform: translateY(8px); } }

.pg-panel-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.pg-panel-heading h3 { margin: 0; color: #10223b; font-size: 1.45rem; }
.pg-panel-heading p { margin: 3px 0 0; color: #778197; font-size: .88rem; }
.pg-panel-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #e5f9fb; font-size: 1.45rem; }

.pg-account-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.pg-account-form label { display: grid; gap: 7px; color: #344258; font-size: .82rem; font-weight: 800; }
.pg-account-form input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d6dde8;
    border-radius: 14px;
    padding: 14px 16px;
    color: #17263c;
    background: #fff;
    font: 600 .9rem Cairo, sans-serif;
    outline: none;
    transition: .2s ease;
}
.pg-account-form input:focus { border-color: #18aebd; box-shadow: 0 0 0 4px rgba(24,174,189,.12); }
.pg-primary-btn {
    grid-column: 1 / -1;
    border: 0;
    border-radius: 15px;
    padding: 15px;
    color: #fff;
    background: linear-gradient(135deg, #08698b, #1db8c5);
    box-shadow: 0 10px 24px rgba(7,117,145,.2);
    font: 900 1rem Cairo, sans-serif;
    cursor: pointer;
}
.pg-text-btn { grid-column: 1 / -1; border: 0; color: #087c99; background: transparent; font: 700 .84rem Cairo, sans-serif; cursor: pointer; }
.pg-terms { grid-column: 1 / -1; display: flex !important; grid-template-columns: none; align-items: center; gap: 9px !important; }
.pg-terms input { width: 18px; height: 18px; accent-color: #12a8b8; }

.pg-packages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }
.pg-package-card {
    position: relative;
    display: grid;
    gap: 16px;
    align-content: space-between;
    min-height: 260px;
    padding: 24px 20px 20px;
    border: 1px solid #dde3ec;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(19,44,77,.07);
}
.pg-package-card h4 { margin: 4px 0; color: #12243d; font-size: 1.28rem; }
.pg-package-card p { margin: 0; color: #7a8497; font-size: .78rem; }
.pg-package-card > div > span { color: #159dac; font-size: .73rem; font-weight: 900; }
.pg-package-card > strong { color: #10223b; font-size: 2rem; }
.pg-package-card > strong small { font-size: .72rem; color: #7b8495; }
.pg-package-featured { border: 2px solid #18afbd; transform: translateY(-7px); box-shadow: 0 18px 36px rgba(12,143,163,.17); }
.pg-package-featured em { position: absolute; top: -13px; right: 18px; padding: 5px 12px; border-radius: 999px; color: #082d54; background: #ffd45a; font-size: .68rem; font-style: normal; font-weight: 900; }
.pg-buy-btn {
    border: 0;
    border-radius: 13px;
    padding: 12px;
    color: #12213a;
    background: linear-gradient(135deg, #ffd966, #f6b927);
    font: 900 .95rem Cairo, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(229,171,30,.2);
}
.pg-payment-note { display: flex; gap: 11px; align-items: center; margin-top: 20px; padding: 13px 16px; border-radius: 15px; color: #526076; background: #edf7f8; font-size: .77rem; }
.pg-payment-note span { font-size: 1.25rem; }.pg-payment-note p { margin: 0; }
.pg-account-notice { display: none; margin: 0 30px 26px; padding: 12px 14px; border-radius: 12px; text-align: center; color: #075f70; background: #dff8f5; font-size: .82rem; font-weight: 700; }
.pg-account-notice.show { display: block; }

@media (max-width: 700px) {
    .pg-account-overlay { padding: 9px; }
    .pg-account-modal { width: 100%; max-height: 96vh; border-radius: 23px; }
    .pg-account-hero { grid-template-columns: 1fr; padding: 27px 58px 20px 20px; border-radius: 23px 23px 0 0; }
    .pg-account-brand img { width: 86px; }
    .pg-balance-card { padding: 12px 15px; }
    .pg-account-tabs { margin: 15px 14px 0; }
    .pg-account-content { padding: 20px 14px 22px; }
    .pg-account-form { grid-template-columns: 1fr; }
    .pg-account-form > * { grid-column: 1 !important; }
    .pg-packages { grid-template-columns: 1fr; }
    .pg-package-card { min-height: 0; grid-template-columns: 1fr auto; align-items: end; }
    .pg-package-card > div { grid-column: 1 / -1; }
    .pg-package-card .pg-buy-btn { min-width: 110px; }
    .pg-package-featured { transform: none; margin-top: 7px; }
    .pg-panel-heading h3 { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-account-modal, .pg-account-panel.active { animation: none; }
}
/* وضع زر حسابي أعلى يمين الصفحة الرئيسية */
#start-screen .poster-container > #pgAccountOpen {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 145px !important;
    min-width: 145px !important;
    height: 54px !important;
    padding: 6px 12px !important;

    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 16px !important;
    z-index: 100 !important;
}
/* إبراز زر حسابي */
#start-screen .poster-container > #pgAccountOpen {
    overflow: hidden !important;

    border: 2px solid #ffd65a !important;

    background:
        linear-gradient(135deg, #075079, #13aebe) !important;

    box-shadow:
        0 0 0 3px rgba(255, 214, 90, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(255, 214, 90, 0.35) !important;

    animation: accountButtonPulse 2.5s ease-in-out infinite;
}

/* اللمعة المتحركة داخل الزر */
#start-screen .poster-container > #pgAccountOpen::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;

    width: 35%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.65),
        transparent
    );

    transform: rotate(20deg);
    animation: accountButtonShine 4s ease-in-out infinite;
}

/* حركة التوهج الخفيفة */
@keyframes accountButtonPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(255, 214, 90, 0.15),
            0 8px 22px rgba(0, 0, 0, 0.35),
            0 0 14px rgba(255, 214, 90, 0.30);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(255, 214, 90, 0.25),
            0 10px 28px rgba(0, 0, 0, 0.42),
            0 0 30px rgba(255, 214, 90, 0.65);
    }
}

/* مرور اللمعة */
@keyframes accountButtonShine {
    0%,
    65% {
        left: -70%;
    }

    100% {
        left: 140%;
    }
}

/* عند وضع الماوس عليه */
#start-screen .poster-container > #pgAccountOpen:hover {
    filter: brightness(1.12);
    transform: translateY(-3px) scale(1.03) !important;
}

#start-screen .poster-container > #pgAccountOpen {
    width: 190px !important;
    min-width: 190px !important;
}

#pgHeaderBalance {
    display: block !important;
    white-space: nowrap !important;
    font-size: 10px !important;
}

/* إبقاء رصيد الهدية داخل نافذة الحساب في سطر واحد */
.pg-balance-card strong {
    white-space: nowrap !important;
    font-size: 18px !important;
}

/* جعل اسم باقة المباراة في سطر واحد */
.pg-package-card h4 {
    white-space: nowrap !important;
    font-size: 16px !important;
}

/* صفحة المستخدم بعد تسجيل الدخول */
.pg-profile-balance {
    padding: 22px;
    border: 1px solid #dce5ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(14, 52, 83, 0.08);
}

.pg-profile-balance h4 {
    margin: 0 0 18px;
    color: #10223b;
    font-size: 20px;
}

.pg-profile-balance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pg-profile-credit {
    display: grid;
    gap: 12px;
    padding: 18px 14px;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    text-align: center;
    background: #f7faff;
}

.pg-profile-credit.featured {
    border: 2px solid #16aeba;
    background: linear-gradient(
        145deg,
        #e9fcfd,
        #f7ffff
    );
}

.pg-profile-credit span {
    color: #536177;
    font-size: 13px;
    font-weight: 700;
}

.pg-profile-credit strong {
    color: #087c96;
    font-size: 34px;
    line-height: 1;
}

.pg-logout-btn {
    width: 100%;
    margin-top: 18px;
    padding: 14px;

    border: 1px solid #e1e6ed;
    border-radius: 14px;

    color: #b52d3b;
    background: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.pg-logout-btn:hover {
    color: #ffffff;
    border-color: #c83f4c;
    background: #c83f4c;
}

.pg-account-tabs.pg-user-signed-in {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 650px) {
    .pg-profile-balance-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
 /* ترتيب زر بدء اللعبة وزر الأسئلة الشائعة */
.guide-final-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    direction: rtl;
}

/* تصميم زر الأسئلة الشائعة */
.faq-floating-button {
    min-height: 58px;
    padding: 12px 25px;

    border: 2px solid #55b7ff;
    border-radius: 15px;

    color: #ffffff;

    background: linear-gradient(
    145deg,
    #147ac2,
    #075495
);

position: relative;
left: -80;
top: 0;

    box-shadow:
        0 7px 0 #043967,
        0 11px 22px rgba(0, 0, 0, 0.25);

    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.faq-floating-button:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.faq-floating-button:active {
    transform: translateY(4px);

    box-shadow:
        0 3px 0 #043967,
        0 6px 12px rgba(0, 0, 0, 0.2);
}

/* ترتيب الأزرار على الهاتف */
@media (max-width: 650px) {
    .guide-final-actions {
        flex-direction: column;
        gap: 13px;
    }

    .guide-final-actions button {
        width: 100%;
        max-width: 330px;
    }

    .faq-floating-button {
        font-size: 16px;
    }
}

/* ==========================================
   نافذة الأسئلة الشائعة
========================================== */

.faq-overlay {
    position: fixed;
    inset: 0;
z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    direction: rtl;

    background: rgba(1, 12, 33, 0.88);
    backdrop-filter: blur(8px);
}

/* إخفاء النافذة */
.faq-overlay.hidden {
    display: none !important;
}

/* الصندوق الرئيسي */
.faq-modal {
    position: relative;

    width: min(920px, 96vw);
    max-height: 90vh;

    padding: 28px;

    overflow-y: auto;
    overflow-x: hidden;

    border: 2px solid #238ed8;
    border-radius: 25px;

    color: #ffffff;

    background: linear-gradient(
        155deg,
        #073568,
        #031b3d
    );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(28, 145, 226, 0.25);

    font-family: Cairo, sans-serif;
}

/* شريط التمرير */
.faq-modal::-webkit-scrollbar {
    width: 9px;
}

.faq-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 20px;
}

.faq-modal::-webkit-scrollbar-thumb {
    background: #218bd6;
    border-radius: 20px;
}

/* زر الإغلاق */
.faq-close {
    position: absolute;
    top: 16px;
    left: 16px;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    color: #ffffff;
    background: #e94355;

    box-shadow:
        0 5px 0 #a92131,
        0 9px 18px rgba(0, 0, 0, 0.25);

    font-size: 23px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.faq-close:hover {
    filter: brightness(1.12);
    transform: scale(1.07);
}

/* رأس النافذة */
.faq-header {
    display: flex;
    align-items: center;
    gap: 15px;

    padding-left: 55px;
    margin-bottom: 20px;
}

.faq-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 62px;
    height: 62px;

    border-radius: 18px;

    background: linear-gradient(
        145deg,
        #ffe06b,
        #ffad19
    );

    box-shadow:
        0 7px 0 #c67a00,
        0 10px 20px rgba(0, 0, 0, 0.25);

    font-size: 31px;
}

.faq-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 31px;
    font-weight: 900;
}

.faq-header p {
    margin: 4px 0 0;

    color: #bcdcf5;

    font-size: 15px;
}

/* صندوق البحث */
.faq-search-box {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 18px;
    padding: 12px 17px;

    border: 1px solid #3b91cf;
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.1);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.faq-search-box:focus-within {
    border-color: #ffd052;

    box-shadow:
        0 0 0 3px rgba(255, 208, 82, 0.15);
}

.faq-search-box span {
    font-size: 21px;
}

.faq-search-box input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    color: #ffffff;
    background: transparent;

    font-family: Cairo, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.faq-search-box input::placeholder {
    color: #b8d0e5;
}

/* تصنيفات الأسئلة */
.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-bottom: 20px;
}

.faq-category-button {
    padding: 9px 15px;

    border: 1px solid #327fbb;
    border-radius: 50px;

    color: #d8edff;
    background: rgba(13, 76, 136, 0.75);

    font-family: Cairo, sans-serif;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.faq-category-button:hover {
    transform: translateY(-2px);
}

.faq-category-button.active {
    border-color: #ffd052;

    color: #08284e;

    background: linear-gradient(
        145deg,
        #ffe06b,
        #ffb31e
    );
}

/* عنوان كل تصنيف */
.faq-section-title {
    margin: 25px 3px 11px;

    color: #ffd65a;

    font-size: 20px;
    font-weight: 900;
}

/* السؤال */
.faq-item {
    margin-bottom: 10px;

    border: 1px solid rgba(70, 157, 220, 0.5);
    border-radius: 15px;

    overflow: hidden;

    background: rgba(6, 50, 99, 0.72);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.faq-item:hover {
    border-color: #4eabea;
}

.faq-item.open {
    border-color: #ffd052;
    background: rgba(10, 66, 125, 0.9);
}

/* زر السؤال */
.faq-question {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 16px 52px 16px 18px;

    border: 0;

    color: #ffffff;
    background: transparent;

    text-align: right;

    font-family: Cairo, sans-serif;
    font-size: 16px;
    font-weight: 900;

    cursor: pointer;
}

.faq-question::before {
    content: "+";

    position: absolute;
    right: 18px;
    top: 50%;

    color: #ffd65a;

    font-size: 27px;
    font-weight: 900;

    transform: translateY(-50%);
}

.faq-item.open .faq-question::before {
    content: "−";
}

/* الإجابة */
.faq-answer {
    max-height: 0;

    padding: 0 52px 0 20px;

    overflow: hidden;

    color: #d5eaff;

    font-size: 15px;
    line-height: 1.9;

    opacity: 0;

    transition:
        max-height 0.35s ease,
        padding 0.35s ease,
        opacity 0.25s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;

    padding-top: 2px;
    padding-bottom: 18px;

    opacity: 1;
}

.faq-answer p {
    margin: 0;
}

/* عدم وجود نتيجة */
.faq-empty {
    padding: 35px 15px;

    text-align: center;

    color: #cde5f8;
}

.faq-empty.hidden {
    display: none !important;
}

.faq-empty span {
    font-size: 42px;
}

.faq-empty h3 {
    margin: 10px 0 4px;

    color: #ffd65a;
}

.faq-empty p {
    margin: 0;
}

/* الهاتف */
@media (max-width: 700px) {
    .faq-overlay {
        padding: 8px;
    }

    .faq-modal {
        width: 100%;
        max-height: 96vh;

        padding: 20px 14px;

        border-radius: 18px;
    }

    .faq-close {
        top: 10px;
        left: 10px;

        width: 39px;
        height: 39px;
    }

    .faq-header {
        gap: 10px;

        padding-left: 42px;
    }

    .faq-header-icon {
        width: 49px;
        height: 49px;

        font-size: 24px;
    }

    .faq-header h2 {
        font-size: 23px;
    }

    .faq-header p {
        font-size: 11px;
    }

    .faq-search-box input {
        font-size: 14px;
    }

    .faq-categories {
        gap: 7px;
    }

    .faq-category-button {
        padding: 8px 11px;
        font-size: 11px;
    }

    .faq-question {
        padding: 14px 44px 14px 12px;

        font-size: 14px;
    }

    .faq-question::before {
        right: 14px;
    }

    .faq-answer {
        padding-right: 44px;

        font-size: 13px;
    }
}

/* إظهار اسم إجابة زوم بوضوح */
#zoom-answer-display {
    color: #111827 !important;
    background: #eef6ff !important;
    border: 2px solid #1687ff !important;
    border-radius: 12px !important;
}

#zoom-answer-text {
    color: #0b63ce !important;
    font-weight: 900 !important;
}

/* =========================================
   مؤثر كشف العدسة في فئة زوم
========================================= */

.zoom-image-container {
    position: relative !important;
}

/* خروج صورة الزوم */
.zoom-question-image.zoom-reveal-out {
    animation: zoomRevealOut 0.35s ease forwards !important;
}

/* دخول الصورة الكاملة */
.zoom-question-image.zoom-reveal-in {
    animation: zoomRevealIn 0.55s cubic-bezier(.2, .8, .2, 1) forwards !important;
}

/* وميض العدسة الدائري */
.zoom-image-container.zoom-lens-flash::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 40px;
    height: 40px;

    border: 5px solid rgba(22, 135, 255, 0.9);
    border-radius: 50%;

    box-shadow:
        0 0 20px rgba(22, 135, 255, 0.9),
        0 0 55px rgba(22, 135, 255, 0.7);

    pointer-events: none;

    animation: zoomLensFlash 0.65s ease-out forwards;
}

/* ظهور صندوق الإجابة */
#zoom-answer-display.zoom-answer-pop {
    animation: zoomAnswerPop 0.5s cubic-bezier(.2, .8, .2, 1) forwards;
}

/* ظهور أزرار الحكم */
#zoom-judgement-buttons.zoom-buttons-pop {
    animation: zoomButtonsPop 0.45s ease forwards;
}

@keyframes zoomRevealOut {
    from {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }

    to {
        transform: scale(0.94);
        filter: blur(7px);
        opacity: 0.25;
    }
}

@keyframes zoomRevealIn {
    from {
        transform: scale(1.12);
        filter: blur(8px);
        opacity: 0;
    }

    to {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes zoomLensFlash {
    from {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    to {
        transform: translate(-50%, -50%) scale(14);
        opacity: 0;
    }
}

@keyframes zoomAnswerPop {
    from {
        transform: translateY(22px) scale(0.96);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes zoomButtonsPop {
    from {
        transform: translateY(16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* احترام إعداد تقليل الحركة في الجهاز */
@media (prefers-reduced-motion: reduce) {
    .zoom-question-image.zoom-reveal-out,
    .zoom-question-image.zoom-reveal-in,
    .zoom-image-container.zoom-lens-flash::after,
    #zoom-answer-display.zoom-answer-pop,
    #zoom-judgement-buttons.zoom-buttons-pop {
        animation-duration: 0.01ms !important;
    }
}

/* =========================================
   بطاقة رصيد المباريات في صفحة الإعداد
========================================= */

.pg-setup-balance-card {
    position: relative;

    margin: 0 0 22px;
    padding: 16px;

    overflow: hidden;

    border: 1px solid rgba(112, 204, 255, 0.48);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 57, 116, 0.96),
            rgba(4, 31, 76, 0.98)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* اللمعة الخلفية */
.pg-setup-balance-card::before {
    content: "";

    position: absolute;
    top: -70px;
    left: -50px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(35, 169, 255, 0.3),
            transparent 70%
        );

    pointer-events: none;
}

.pg-setup-balance-header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 14px;
}

.pg-setup-balance-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pg-setup-balance-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.12);

    font-size: 24px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.pg-setup-balance-title h3 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.pg-setup-balance-title p {
    margin: 3px 0 0;

    color: #bfe5ff;

    font-size: 11px;
    font-weight: 700;
}

.pg-setup-buy-button {
    min-height: 38px;
    padding: 8px 14px;

    flex-shrink: 0;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            #ffd65a,
            #f3ad13
        );

    color: #412700;

    font-family: Cairo, sans-serif;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 14px rgba(244, 174, 18, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pg-setup-buy-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 18px rgba(244, 174, 18, 0.34);
}

.pg-setup-balance-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.pg-setup-credit {
    position: relative;

    display: grid;
    place-items: center;
    gap: 2px;

    min-height: 82px;
    padding: 9px 6px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.08);

    text-align: center;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.pg-setup-credit span {
    color: #d8edff;

    font-size: 11px;
    font-weight: 800;
}

.pg-setup-credit strong {
    color: #ffd75e;

    font-size: 25px;
    font-weight: 900;
    line-height: 1.1;
}

.pg-setup-credit small {
    color: #a9cbe8;

    font-size: 9px;
    font-weight: 700;
}

/* الرصيد المتوفر */
.pg-setup-credit.is-available {
    border-color: rgba(67, 218, 152, 0.45);

    background:
        rgba(30, 168, 111, 0.13);
}

/* الرصيد غير المتوفر */
.pg-setup-credit.is-empty {
    opacity: 0.55;

    filter: grayscale(0.35);
}

.pg-setup-credit.is-empty::after {
    content: "🔒";

    position: absolute;
    top: 7px;
    left: 8px;

    font-size: 12px;
}

/* نوع المباراة المختار */
.pg-setup-credit.is-selected {
    border-color: #70ccff;

    background:
        linear-gradient(
            145deg,
            rgba(18, 139, 244, 0.3),
            rgba(50, 71, 218, 0.28)
        );

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(14, 118, 235, 0.22);
}

.pg-setup-no-balance {
    position: relative;
    z-index: 1;

    margin: 12px 0 0;
    padding: 9px 12px;

    border: 1px solid rgba(255, 125, 132, 0.35);
    border-radius: 10px;

    background: rgba(225, 61, 76, 0.13);

    color: #ffd9dc;

    text-align: center;
    font-size: 11px;
    font-weight: 800;
}

/* الهاتف */
@media (max-width: 600px) {
    .pg-setup-balance-card {
        padding: 13px;
    }

    .pg-setup-balance-header {
        align-items: flex-start;
    }

    .pg-setup-balance-icon {
        width: 38px;
        height: 38px;

        font-size: 20px;
    }

    .pg-setup-balance-title h3 {
        font-size: 14px;
    }

    .pg-setup-buy-button {
        padding: 7px 9px;

        font-size: 10px;
    }

    .pg-setup-balance-grid {
        gap: 6px;
    }

    .pg-setup-credit {
        min-height: 72px;
        padding: 7px 4px;
    }

    .pg-setup-credit span {
        font-size: 9px;
    }

    .pg-setup-credit strong {
        font-size: 21px;
    }

    .pg-setup-credit small {
        font-size: 8px;
    }
}

/* =========================================
   خيارات الجولات غير المتوفرة
========================================= */

#setup-screen .round-option.balance-empty,
#setup-screen .round-option:disabled {
    position: relative;

    opacity: 0.48 !important;

    border-color:
        rgba(150, 170, 200, 0.35) !important;

    background:
        rgba(25, 47, 79, 0.72) !important;

    color: #aab9ce !important;

    filter: grayscale(0.55);

    cursor: not-allowed !important;

    box-shadow: none !important;

    transform: none !important;
}

#setup-screen .round-option.balance-empty::after,
#setup-screen .round-option:disabled::after {
    content: "🔒";

    position: absolute;
    top: 6px;
    left: 8px;

    width: auto;
    height: auto;

    display: block;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: inherit;

    font-size: 13px;

    box-shadow: none;
    transform: none;
}

/* منع حركة المرور فوق الخيار المقفل */
#setup-screen .round-option.balance-empty:hover,
#setup-screen .round-option:disabled:hover {
    border-color:
        rgba(150, 170, 200, 0.35) !important;

    background:
        rgba(25, 47, 79, 0.72) !important;

    transform: none !important;

    box-shadow: none !important;
}

/* شكل زر بدء المباراة عند عدم وجود أي رصيد */
#startGameBtn:disabled {
    opacity: 0.5;

    filter: grayscale(0.65);

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;
}

/* رسالة تعذّر تحميل صورة زوم */
#zoom-image-error {
    display: none;
    max-width: 420px;
    margin: 35px auto;
    padding: 22px 28px;
    color: #92400e;
    background: linear-gradient(135deg, #fff7db, #ffedb5);
    border: 2px solid #f6b91a;
    border-radius: 16px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
    box-shadow: 0 8px 22px rgba(246, 185, 26, 0.22);
}

/* مؤقت سؤال زوم */
.zoom-timer {
    width: fit-content;
    margin: 10px auto 14px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
    background: linear-gradient(135deg, #1687ff, #3154e8);
    border: 2px solid #7cc8ff;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(22, 135, 255, 0.28);
    font-weight: 900;
    direction: rtl;
}

#zoom-timer-text {
    min-width: 32px;
    font-size: 25px;
    line-height: 1;
    text-align: center;
}

.zoom-timer-icon {
    font-size: 20px;
}

.zoom-timer-unit {
    font-size: 15px;
}

/* آخر عشر ثوانٍ */
.zoom-timer.is-warning {
    background: linear-gradient(135deg, #ff9f1c, #f04d23);
    border-color: #ffd166;
    animation: zoomTimerPulse 0.75s infinite;
}

/* انتهاء الوقت */
.zoom-timer.is-finished {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border-color: #ff8a8a;
}

@keyframes zoomTimerPulse {
    50% {
        transform: scale(1.07);
        box-shadow: 0 7px 25px rgba(240, 77, 35, 0.5);
    }
}

/* موقع مؤقت زوم في الجهة اليسرى */
.zoom-question-card {
    position: relative;
}

#zoom-timer {
    position: absolute;
    top: 105px;
    left: 42px;
    margin: 0;
    z-index: 5;
}

/* عند انتهاء الوقت: إخفاء الساعة وكلمة ثانية */
#zoom-timer.is-finished .zoom-timer-icon,
#zoom-timer.is-finished .zoom-timer-unit {
    display: none;
}

#zoom-timer.is-finished #zoom-timer-text {
    min-width: auto;
    font-size: 17px;
    white-space: nowrap;
}
/* التصميم الدائري لمؤقت زوم */
#zoom-timer.zoom-timer {
    width: 108px;
    height: 108px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 32, 70, 0.92);
    border: none;
    border-radius: 50%;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(255, 159, 28, 0.22);
    overflow: visible;
}

.zoom-timer-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.zoom-timer-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 8;
}

.zoom-timer-progress {
    fill: none;
    stroke: #ff9f1c;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 0;
    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(255, 159, 28, 0.65));
}

.zoom-timer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#zoom-timer #zoom-timer-text {
    min-width: 0;
    color: #ffffff;
    font-size: 31px;
    font-weight: 900;
}

#zoom-timer .zoom-timer-unit {
    margin-top: 6px;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 800;
}

/* تتحول الدائرة إلى الأحمر في آخر عشر ثوانٍ */
#zoom-timer.is-warning .zoom-timer-progress {
    stroke: #ff3434;
    filter: drop-shadow(0 0 7px rgba(255, 52, 52, 0.8));
}

/* شكل رسالة انتهاء الوقت */
#zoom-timer.is-finished {
    width: auto;
    height: auto;
    min-width: 150px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    border: 2px solid #ff8a8a;
    border-radius: 999px;
}

#zoom-timer.is-finished .zoom-timer-ring,
#zoom-timer.is-finished .zoom-timer-unit {
    display: none;
}

#zoom-timer.is-finished #zoom-timer-text {
    font-size: 17px;
    white-space: nowrap;
}

/* وضع أزرار زوم في صف واحد */
.zoom-action-row {
    position: relative;
    width: min(760px, 90%);
    min-height: 58px;
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-action-row .zoom-show-answer {
    position: relative;
    z-index: 2;
    margin: 0;
}

.zoom-action-row .zoom-judgement-buttons {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.zoom-action-row .zoom-correct-button,
.zoom-action-row .zoom-wrong-button {
    min-width: 210px;
    margin: 0;
    pointer-events: auto;
}

/* ضمان عمل الإخفاء الصحيح */
.zoom-action-row .hidden {
    display: none !important;
}

/* تكبير مساحة صورة سؤال زوم */
.zoom-image-container {
    width: min(680px, 72vw);
    height: clamp(270px, 42vh, 360px);
    margin: 6px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#zoom-question-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
/* فرض أزرار زوم على صف واحد */
#zoom-question-card .zoom-action-row {
    position: relative !important;
    width: min(760px, 90%) !important;
    min-height: 58px !important;
    margin: 12px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#zoom-question-card .zoom-action-row #zoom-show-answer {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 !important;
}

#zoom-question-card .zoom-action-row #zoom-judgement-buttons {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#zoom-question-card .zoom-action-row #zoom-correct-button,
#zoom-question-card .zoom-action-row #zoom-wrong-button {
    position: static !important;
    min-width: 210px !important;
    margin: 0 !important;
}
/* الشكل الأساسي الفخم لأزرار زوم */
#zoom-question-card #zoom-show-answer,
#zoom-question-card #zoom-correct-button,
#zoom-question-card #zoom-wrong-button {
    position: relative;
    min-width: 210px;
    min-height: 56px;
    padding: 13px 25px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-radius: 15px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transform: translateY(0);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.28);
}

/* زر إظهار الإجابة */
#zoom-question-card #zoom-show-answer {
    background: linear-gradient(
        180deg,
        #4db7ff 0%,
        #1687ff 48%,
        #075fca 100%
    );
    box-shadow:
        0 7px 0 #064d9e,
        0 11px 20px rgba(22, 135, 255, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.45);
}

/* زر الإجابة الصحيحة */
#zoom-question-card #zoom-correct-button {
    background: linear-gradient(
        180deg,
        #49dc82 0%,
        #20b85a 48%,
        #087a36 100%
    );
    box-shadow:
        0 7px 0 #075d2b,
        0 11px 20px rgba(32, 184, 90, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

/* زر الإجابة الخاطئة */
#zoom-question-card #zoom-wrong-button {
    background: linear-gradient(
        180deg,
        #ff6a72 0%,
        #f53242 48%,
        #b21425 100%
    );
    box-shadow:
        0 7px 0 #870f1d,
        0 11px 20px rgba(245, 50, 66, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.42);
}

/* لمعة خفيفة أعلى الأزرار */
#zoom-question-card #zoom-show-answer::before,
#zoom-question-card #zoom-correct-button::before,
#zoom-question-card #zoom-wrong-button::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 10%;
    width: 80%;
    height: 42%;
    border-radius: 12px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    pointer-events: none;
}

/* الحركة عند مرور المؤشر */
#zoom-question-card #zoom-show-answer:hover,
#zoom-question-card #zoom-correct-button:hover,
#zoom-question-card #zoom-wrong-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

/* حركة الضغط الحقيقية */
#zoom-question-card #zoom-show-answer:active,
#zoom-question-card #zoom-correct-button:active,
#zoom-question-card #zoom-wrong-button:active {
    transform: translateY(5px);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 5px 10px rgba(0, 0, 0, 0.2);
}
/* الترتيب النهائي المضبوط لأزرار زوم */
html body #zoom-question-overlay
#zoom-question-card > .zoom-action-row {
    width: 760px !important;
    max-width: 90% !important;
    min-height: 64px !important;
    margin: 14px auto !important;
    display: grid !important;
    grid-template-columns: 220px 240px 220px !important;
    column-gap: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}

/* إخراج زري التحكيم إلى نفس شبكة الصف */
html body #zoom-question-overlay
#zoom-question-card > .zoom-action-row >
#zoom-judgement-buttons {
    display: contents !important;
}

/* الخاطئة يسارًا */
html body #zoom-question-overlay
#zoom-question-card #zoom-wrong-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 220px !important;
    min-width: 0 !important;
    max-width: 220px !important;
    margin: 0 !important;
}

/* إظهار الإجابة في الوسط */
html body #zoom-question-overlay
#zoom-question-card #zoom-show-answer {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 240px !important;
    min-width: 0 !important;
    max-width: 240px !important;
    margin: 0 !important;
}

/* الصحيحة يمينًا */
html body #zoom-question-overlay
#zoom-question-card #zoom-correct-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 220px !important;
    min-width: 0 !important;
    max-width: 220px !important;
    margin: 0 !important;
}

html body #zoom-question-overlay
#zoom-question-card > .zoom-action-row >
#zoom-judgement-buttons {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: contents !important;
}

/* المؤقت الدائري لفئة بدون كلام */
#charades-timer.charades-timer {
    position: absolute !important;
    top: 110px !important;
    left: 48px !important;
    z-index: 10 !important;

    width: 108px !important;
    height: 108px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(8, 32, 70, 0.94) !important;
    border: none !important;
    border-radius: 50% !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(255, 159, 28, 0.25) !important;
}

.charades-timer-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.charades-timer-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 8;
}

.charades-timer-progress {
    fill: none;
    stroke: #ff9f1c;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 0;
    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
    filter:
        drop-shadow(0 0 5px rgba(255, 159, 28, 0.7));
}

.charades-timer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#charades-timer-text {
    color: #ffffff;
    font-size: 31px;
    font-weight: 900;
}

.charades-timer-unit {
    margin-top: 6px;
    color: #dbeafe;
    font-size: 13px;
    font-weight: 800;
}

/* آخر عشر ثوانٍ */
#charades-timer.is-warning .charades-timer-progress {
    stroke: #ff3434;
    filter:
        drop-shadow(0 0 7px rgba(255, 52, 52, 0.85));
}

#charades-timer.is-warning {
    animation: charadesTimerPulse 0.75s infinite;
}

/* انتهاء الوقت */
#charades-timer.is-finished {
    width: auto !important;
    height: auto !important;
    min-width: 150px !important;
    padding: 12px 18px !important;

    background:
        linear-gradient(135deg, #dc2626, #991b1b) !important;

    border: 2px solid #ff8a8a !important;
    border-radius: 999px !important;
}

#charades-timer.is-finished .charades-timer-ring,
#charades-timer.is-finished .charades-timer-unit {
    display: none;
}

#charades-timer.is-finished #charades-timer-text {
    font-size: 17px;
    white-space: nowrap;
}

@keyframes charadesTimerPulse {
    50% {
        transform: scale(1.07);
    }
}

/* زر ابدأ — أعلى يمين شاشة بدون كلام */
#charades-start-button {
    position: absolute !important;
    top: 230px !important;
    right: 150px !important;
    transform: none !important;
    z-index: 20 !important;

    min-width: 150px !important;
    padding: 14px 30px !important;

    border: 2px solid #66b8ff !important;
    border-radius: 16px !important;

    background: linear-gradient(
        180deg,
        #42a5ff 0%,
        #1686ee 70%,
        #0870ce 100%
    ) !important;

    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 900 !important;

    box-shadow:
        0 7px 0 #075ba9,
        0 12px 22px rgba(10, 106, 196, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;

    cursor: pointer !important;
}

#charades-start-button:hover {
    filter: brightness(1.08);
    transform: translateY(-2px) !important;
}

#charades-start-button:active {
    transform: translateY(5px) !important;
    box-shadow:
        0 2px 0 #075ba9,
        0 6px 12px rgba(10, 106, 196, 0.25) !important;
}

/* زر إظهار الإجابة — تحت مؤقت بدون كلام */
#charades-show-answer {
    position: absolute !important;
    top: 400px !important;
    left: 540px !important;
    z-index: 20 !important;

    width: 190px !important;
    margin: 0 !important;
    padding: 13px 18px !important;

    border: 2px solid #66b8ff !important;
    border-radius: 16px !important;

    background: linear-gradient(
        180deg,
        #42a5ff 0%,
        #1686ee 70%,
        #0870ce 100%
    ) !important;

    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    box-shadow:
        0 7px 0 #075ba9,
        0 12px 22px rgba(10, 106, 196, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;

    cursor: pointer !important;
}

#charades-show-answer:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

#charades-show-answer:active {
    transform: translateY(5px);
    box-shadow:
        0 2px 0 #075ba9,
        0 6px 12px rgba(10, 106, 196, 0.25) !important;
}

/* صندوق إجابة بدون كلام */
#charades-answer-display {
    position: absolute !important;
    top: 330px !important;
    left: 42px !important;
    z-index: 20 !important;

    width: 190px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 14px 12px !important;

    text-align: center !important;
    line-height: 1.4 !important;

    background: linear-gradient(
        180deg,
        #fff8dc,
        #ffe49a
    ) !important;

    border: 2px solid #f4b728 !important;
    border-radius: 16px !important;

    color: #102347 !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    box-shadow:
        0 6px 0 #c98908,
        0 11px 20px rgba(177, 113, 0, 0.22) !important;
}

/* الإجابة في منتصف شاشة بدون كلام */
#charades-answer-display {
    position: absolute !important;
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 600px !important;
    max-width: 65vw !important;
    min-height: 150px !important;

    padding: 28px 35px !important;
    box-sizing: border-box !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 25px !important;
    text-align: center !important;
}

#charades-answer-display.hidden {
    display: none !important;
}

#charades-answer-text {
    font-size: 42px !important;
    line-height: 1.3 !important;
}
/* أزرار الحكم تحت الإجابة في المنتصف */
#charades-judgement-buttons {
    position: absolute !important;
    top: calc(48% + 125px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    margin: 0 !important;

    display: flex;
    flex-direction: row !important;
    justify-content: center;
    gap: 20px !important;

    z-index: 25 !important;
}

#charades-judgement-buttons.hidden {
    display: none !important;
}

#charades-correct-button,
#charades-wrong-button {
    width: 220px !important;
    min-height: 58px !important;
    padding: 14px 20px !important;

    font-size: 21px !important;
    font-weight: 900 !important;
}

/* السماح بإخفاء QR وزر ابدأ */
#charades-qr.hidden,
#charades-start-button.hidden {
    display: none !important;
}

/* تحسين أزرار الحكم في بدون كلام */
#charades-correct-button,
#charades-wrong-button {
    position: relative !important;
    overflow: hidden !important;

    width: 235px !important;
    min-height: 62px !important;
    padding: 14px 22px !important;

    border-radius: 17px !important;

    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 950 !important;

    cursor: pointer !important;
    transition:
        transform 0.15s ease,
        filter 0.15s ease !important;
}

#charades-correct-button {
    border: 2px solid #66eda0 !important;

    background: linear-gradient(
        180deg,
        #42df82 0%,
        #1fc362 65%,
        #11a94f 100%
    ) !important;

    box-shadow:
        0 8px 0 #087f38,
        0 13px 22px rgba(9, 139, 60, 0.30),
        inset 0 3px 0 rgba(255, 255, 255, 0.38) !important;
}

#charades-wrong-button {
    border: 2px solid #ff7782 !important;

    background: linear-gradient(
        180deg,
        #ff5966 0%,
        #f33243 65%,
        #d91d2d 100%
    ) !important;

    box-shadow:
        0 8px 0 #a50d1a,
        0 13px 22px rgba(188, 21, 37, 0.30),
        inset 0 3px 0 rgba(255, 255, 255, 0.38) !important;
}

#charades-correct-button::before,
#charades-wrong-button::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 10%;
    width: 80%;
    height: 14px;

    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

#charades-correct-button:hover,
#charades-wrong-button:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

#charades-correct-button:active,
#charades-wrong-button:active {
    transform: translateY(6px) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35) !important;
}

/* ==================================================
   لوحة بازل متكيّفة مع أبعاد الصورة
   ================================================== */

#game-screen .puzzle-image.puzzle-image-adaptive {
    width: min(
        100%,
        calc((100vh - 205px) * var(--puzzle-image-ratio))
    ) !important;

    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 205px) !important;

    aspect-ratio: var(--puzzle-image-ratio) !important;

    margin: auto !important;
    overflow: hidden !important;
}

#game-screen .puzzle-image.puzzle-image-adaptive > #puzzle-image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
}

/* ==================================================
   زر وشاشة تكبير البازل — إضافة مستقلة لا تغيّر تخطيط اللعبة
   ================================================== */
.puzzle-fullscreen-open-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    border: 2px solid #79d7ff;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, #329eff 0%, #0875d2 100%);
    box-shadow: 0 6px 0 #074b91, 0 10px 20px rgba(0, 115, 210, 0.28);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.14s ease;
}

.puzzle-fullscreen-open-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.puzzle-fullscreen-open-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #074b91;
}

.puzzle-fullscreen-open-btn:disabled,
.puzzle-fullscreen-open-btn.puzzle-fullscreen-used {
    cursor: not-allowed;
    color: #d9e5ef;
    border-color: #7890a6;
    background: linear-gradient(180deg, #6f8295 0%, #4c6074 100%);
    box-shadow: 0 4px 0 #2e3e4e;
    filter: none;
    transform: none;
    opacity: 0.82;
}

.puzzle-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: block;
    padding: 6px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 45%, rgba(22, 91, 176, 0.34), transparent 55%),
        #03142d;
}

.puzzle-fullscreen-overlay.hidden {
    display: none !important;
}

.puzzle-fullscreen-toolbar {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;
    left: 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 12px 8px;
    box-sizing: border-box;
    direction: rtl;
    pointer-events: none;
}

.puzzle-fullscreen-close-btn {
    min-width: 170px;
    min-height: 52px;
    padding: 10px 22px;
    border: 2px solid #79d7ff;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, #329eff 0%, #0875d2 100%);
    box-shadow: 0 6px 0 #074b91, 0 10px 20px rgba(0, 115, 210, 0.30);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.puzzle-fullscreen-close-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.puzzle-fullscreen-close-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #074b91;
}

.puzzle-fullscreen-countdown {
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    color: #ffffff;
    filter: drop-shadow(0 0 10px rgba(255, 166, 28, 0.42));
}

.puzzle-fullscreen-countdown-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.puzzle-fullscreen-countdown-track,
.puzzle-fullscreen-countdown-progress {
    fill: #0b244e;
    stroke-width: 8;
}

.puzzle-fullscreen-countdown-track {
    stroke: rgba(255, 255, 255, 0.18);
}

.puzzle-fullscreen-countdown-progress {
    fill: none;
    stroke: #ff9f1c;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear, stroke 0.2s ease;
}

.puzzle-fullscreen-countdown.is-warning {
    filter: drop-shadow(0 0 12px rgba(255, 59, 59, 0.65));
}

.puzzle-fullscreen-countdown.is-warning .puzzle-fullscreen-countdown-progress {
    stroke: #ff3434;
}

.puzzle-fullscreen-countdown-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 900;
}

#puzzle-fullscreen-countdown-value {
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
}

.puzzle-fullscreen-countdown-unit {
    margin-top: 6px;
    font-size: 14px;
}

.puzzle-fullscreen-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid rgba(77, 181, 255, 0.5);
    border-radius: 20px;
    background: rgba(3, 31, 68, 0.7);
    pointer-events: none;
    user-select: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* نُلغي قيود شاشة اللعبة أثناء النقل فقط؛ القياس يتم بتحويل بصري يحافظ على كل القطع */
#puzzle-fullscreen-stage > .puzzle-image.puzzle-is-fullscreen-live {
    position: relative !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    transform-origin: center center !important;
}

/* عند نقل البازل خارج #game-screen نحافظ على نفس تنسيق الصورة الداخلية */
#puzzle-fullscreen-stage > .puzzle-image.puzzle-is-fullscreen-live > #puzzle-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

@media (max-width: 700px) {
    .puzzle-fullscreen-overlay {
        padding: 6px;
    }

    .puzzle-fullscreen-toolbar {
        min-height: 54px;
        padding: 5px 6px 9px;
    }

    .puzzle-fullscreen-countdown {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .puzzle-fullscreen-close-btn {
        min-width: 132px;
        min-height: 46px;
        padding: 8px 12px;
        font-size: 15px;
    }

    #puzzle-fullscreen-countdown-value {
        font-size: 23px;
    }
}
/* ==========================================
   الوقت الإضافي النهائي للأسئلة
========================================== */
.question-overtime-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999998;
    display: grid;
    place-items: center;
    background: rgba(3, 14, 38, 0.52);
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.question-overtime-overlay.hidden {
    display: none !important;
}

.question-overtime-card {
    width: min(390px, 82vw);
    padding: 22px 24px 18px;
    border: 3px solid rgba(255, 168, 24, 0.95);
    border-radius: 32px;
    text-align: center;
    color: #fff;
    background: linear-gradient(155deg, #123a7a 0%, #071a43 100%);
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.48), 0 0 34px rgba(255, 159, 28, 0.42);
    animation: questionOvertimeEnter 0.35s ease-out both;
}

.question-overtime-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 8px 24px;
    border-radius: 999px;
    color: #142851;
    background: linear-gradient(180deg, #ffd76a, #ff9f1c);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 1000;
    box-shadow: 0 6px 0 #c26b00;
}

.question-overtime-timer {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 15px auto 8px;
    filter: drop-shadow(0 0 18px rgba(255, 159, 28, 0.48));
}

.question-overtime-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.question-overtime-track,
.question-overtime-progress {
    fill: none;
    stroke-width: 14;
}

.question-overtime-track {
    stroke: rgba(255, 255, 255, 0.2);
}

.question-overtime-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear, stroke 0.25s ease;
}

.question-overtime-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#question-overtime-text {
    color: #fff;
    font-size: 76px;
    font-weight: 1000;
}

.question-overtime-content span {
    margin-top: 8px;
    color: #dceaff;
    font-size: 20px;
    font-weight: 900;
}

.question-overtime-card p {
    margin: 10px 0 0;
    color: #fff3cf;
    font-size: 19px;
    font-weight: 900;
}

.question-overtime-timer.is-warning {
    animation: questionOvertimePulse 0.7s ease-in-out infinite;
    filter: drop-shadow(0 0 22px rgba(244, 51, 67, 0.75));
}

.question-overtime-timer.is-warning .question-overtime-progress {
    stroke: #f43343;
}

.question-overtime-timer.is-warning #question-overtime-text {
    color: #ff5966;
}

@keyframes questionOvertimeEnter {
    from { opacity: 0; transform: scale(0.72); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes questionOvertimePulse {
    50% { transform: scale(1.055); }
}

@media (max-height: 650px), (max-width: 600px) {
    .question-overtime-card { width: min(330px, 84vw); padding: 15px 18px 13px; }
    .question-overtime-label { font-size: 24px; }
    .question-overtime-timer { width: 170px; height: 170px; margin: 10px auto 5px; }
    #question-overtime-text { font-size: 58px; }
    .question-overtime-card p { font-size: 16px; }
}
/* ==========================================
   ركّز — جعل الفيديو يملأ الشاشة بالكامل
========================================== */

#focus-video-overlay .focus-video-card {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
}

#focus-video-overlay .focus-video-header {
    display: none !important;
}

#focus-video-overlay .focus-video-container {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

#focus-video-overlay .focus-video-player {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
}

/* ==========================================
   ركّز — عداد الفريق صاحب الإجابة
========================================== */

.focus-team-timer-box {
    position: fixed;

    top: 24px;
    left: 55px;
    right: auto;
    bottom: auto;

    width: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: 6px;

    margin: 0;

    z-index: 1000;
}

.focus-team-timer-label {
    order: 2;

    width: 150px;
    min-width: 150px;

    margin: 0 auto;
    padding: 6px 8px;

    box-sizing: border-box;

    border: 2px solid #ff9f1c;
    border-radius: 14px;

    background: #fff4df;
    color: #9a4c00;

    font-size: 16px;
    font-weight: 900;
    text-align: center;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.focus-team-timer-circle {
    order: 1;

    position: relative;

    width: 94px;
    height: 94px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    transition: transform 0.25s ease;
}

.focus-team-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.focus-team-timer-track,
.focus-team-timer-progress {
    fill: none;
    stroke-width: 11;
}

.focus-team-timer-track {
    stroke: #ffe1b3;
}

.focus-team-timer-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;

    stroke-dasharray: 376.99;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
}

#focus-team-timer-text {
    position: relative;
    z-index: 2;

    color: #e87500;

    font-size: 46px;
    font-weight: 900;
    line-height: 1;

    transition: color 0.3s ease;
}

/* آخر خمس ثوانٍ */
.focus-team-timer-box.is-warning .focus-team-timer-label {
    border-color: #e11d48;
    background: #ffe5ea;
    color: #b00020;
}

.focus-team-timer-box.is-warning .focus-team-timer-progress {
    stroke: #e11d48;
}

.focus-team-timer-box.is-warning #focus-team-timer-text {
    color: #d60024;
}

.focus-team-timer-box.is-warning .focus-team-timer-circle {
    animation: focusTimerWarningPulse 0.65s ease-in-out infinite;
}

@keyframes focusTimerWarningPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* ==========================================
   ركّز — أزرار اختيار الفريق الفائز
========================================== */

#focus-judgement-buttons {
    width: min(900px, 96%);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;

    margin: 18px auto 0;
}

#focus-judgement-buttons.hidden {
    display: none !important;
}

#focus-judgement-buttons button {
    min-height: 62px;
    padding: 12px 18px;

    border: 0;
    border-radius: 16px;

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 19px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

#focus-correct-button {
    background: linear-gradient(
        180deg,
        #22c55e,
        #13863c
    ) !important;

    box-shadow:
        0 7px 0 #08652b,
        0 12px 22px rgba(19, 134, 60, 0.3) !important;
}

#focus-wrong-button {
    background: linear-gradient(
        180deg,
        #249ee8,
        #0872bd
    ) !important;

    box-shadow:
        0 7px 0 #07578e,
        0 12px 22px rgba(8, 114, 189, 0.3) !important;
}

#focus-no-winner-button {
    background: linear-gradient(
        180deg,
        #64748b,
        #3d495a
    ) !important;

    box-shadow:
        0 7px 0 #29323f,
        0 12px 22px rgba(41, 50, 63, 0.3) !important;
}

#focus-judgement-buttons button:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

#focus-judgement-buttons button:active {
    transform: translateY(5px);
    box-shadow: none !important;
}

@media (max-width: 700px) {
    #focus-judgement-buttons {
        grid-template-columns: 1fr;
    }
}


/* إخفاء عداد ركّز بالكامل بعد انتهاء وقت الفريقين */
.focus-team-timer-box.hidden {
    display: none !important;
}
/* ==========================================
   ركّز — زر تقديم الإجابة قبل انتهاء الوقت
========================================== */

.focus-submit-answer-button {
    min-width: 280px;
    min-height: 54px;

    margin-top: 4px;
    padding: 10px 24px;

    border: 2px solid #ffffff;
    border-radius: 16px;

    background: linear-gradient(
        180deg,
        #ffb52e,
        #f08300
    );

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 0 #b85e00,
        0 11px 22px rgba(184, 94, 0, 0.3);

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.focus-submit-answer-button:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.focus-submit-answer-button:active {
    transform: translateY(5px);
    box-shadow: none;
}

.focus-submit-answer-button.hidden {
    display: none !important;
}
/* ==========================================
   ركّز — زر إغلاق الفيديو عند الإعادة
========================================== */

.focus-video-close {
    position: fixed !important;

    top: 18px !important;
    right: 18px !important;

    z-index: 1000001 !important;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: rgba(190, 20, 35, 0.95);
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.focus-video-close:hover {
    background: #e11d48;
    transform: scale(1.08);
}

.focus-video-close.hidden {
    display: none !important;
}
/* ==========================================
   ركّز — التصميم النهائي لأزرار التحكيم
========================================== */

#focus-judgement-buttons {
    width: min(820px, 94%) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;

    margin: 22px auto 12px !important;
    direction: rtl;
}

#focus-judgement-buttons.hidden {
    display: none !important;
}

#focus-judgement-buttons button {
    position: relative;

    min-height: 74px !important;
    padding: 14px 22px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px !important;

    color: #ffffff !important;

    font-family: Cairo, sans-serif !important;
    font-size: 21px !important;
    font-weight: 900 !important;

    cursor: pointer;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.28);

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

/* لمعة أعلى الأزرار */
#focus-judgement-buttons button::before {
    content: "";

    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;

    height: 38%;

    border-radius: 0 0 50% 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.24),
            transparent
        );

    pointer-events: none;
}

/* صاحب الدور */
#focus-correct-button {
    background:
        linear-gradient(
            180deg,
            #35d56f 0%,
            #17a74c 58%,
            #0b8337 100%
        ) !important;

    box-shadow:
        0 8px 0 #07672b,
        0 14px 26px rgba(8, 131, 55, 0.35) !important;
}

/* الفريق المنافس */
#focus-wrong-button {
    background:
        linear-gradient(
            180deg,
            #42baff 0%,
            #168bd3 58%,
            #0871b5 100%
        ) !important;

    box-shadow:
        0 8px 0 #07588d,
        0 14px 26px rgba(8, 113, 181, 0.35) !important;
}

/* لا أحد */
#focus-no-winner-button {
    grid-column: 1 / -1;

    width: min(290px, 80%);
    min-height: 60px !important;

    justify-self: center;

    background:
        linear-gradient(
            180deg,
            #718096 0%,
            #4a586c 58%,
            #354052 100%
        ) !important;

    box-shadow:
        0 7px 0 #27313f,
        0 13px 24px rgba(28, 36, 48, 0.32) !important;
}

#focus-judgement-buttons button:hover {
    filter: brightness(1.1);
    transform: translateY(-3px);
}

#focus-judgement-buttons button:active {
    transform: translateY(6px);
    box-shadow: none !important;
}

/* زر إعادة المقطع */
#focus-replay-button {
    min-width: 270px !important;
    min-height: 56px !important;

    margin: 14px auto 4px !important;
    padding: 11px 24px !important;

    border: 2px solid #ffffff !important;
    border-radius: 17px !important;

    background:
        linear-gradient(
            180deg,
            #ffd34e,
            #f4a900
        ) !important;

    color: #17345e !important;

    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;

    cursor: pointer;

    box-shadow:
        0 7px 0 #bc7900,
        0 13px 24px rgba(188, 121, 0, 0.3) !important;
}

#focus-replay-button:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
}

#focus-replay-button:active {
    transform: translateY(5px);
    box-shadow: none !important;
}

@media (max-width: 650px) {
    #focus-judgement-buttons {
        grid-template-columns: 1fr !important;
    }

    #focus-no-winner-button {
        grid-column: 1;
        width: 85%;
    }

    #focus-judgement-buttons button {
        min-height: 62px !important;
        font-size: 18px !important;
    }
}
/* ==========================================
   اسمع وركّز — الشاشة الأساسية
========================================== */

.listen-focus-overlay {
    position: fixed;
    inset: 0;

    z-index: 1000000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2, 13, 38, 0.88);
    backdrop-filter: blur(8px);

    box-sizing: border-box;
}

.listen-focus-overlay.hidden {
    display: none !important;
}

.listen-focus-card {
    width: min(860px, 96vw);
    max-height: 94vh;

    padding: 24px 30px 30px;

    overflow-y: auto;

    border: 3px solid #35b8ff;
    border-radius: 28px;

    background:
        linear-gradient(
            155deg,
            #124982 0%,
            #0b3568 48%,
            #062650 100%
        );

    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.52),
        0 0 32px rgba(53, 184, 255, 0.25);

    box-sizing: border-box;
}

.listen-focus-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 20px;

    color: #ffffff;
    text-align: center;
}

.listen-focus-header span {
    font-size: 43px;
}

.listen-focus-header h2 {
    margin: 0;

    font-size: 36px;
    font-weight: 900;
}

.listen-focus-audio-stage {
    width: min(650px, 96%);

    margin: 10px auto;
    padding: 32px 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;

    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;

    background:
        rgba(255, 255, 255, 0.09);

    box-shadow:
        inset 0 0 26px rgba(255, 255, 255, 0.04);
}

.listen-focus-audio-stage.hidden {
    display: none !important;
}

.listen-focus-speaker {
    width: 130px;
    height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 4px solid #ffcc3f;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #dff4ff 60%,
            #8bd7ff 100%
        );

    font-size: 65px;

    box-shadow:
        0 0 0 12px rgba(255, 204, 63, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.28);
}

.listen-focus-audio-stage.is-playing
.listen-focus-speaker {
    animation:
        listenFocusSpeakerPulse 0.8s
        ease-in-out infinite;
}

@keyframes listenFocusSpeakerPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 12px rgba(255, 204, 63, 0.12),
            0 15px 30px rgba(0, 0, 0, 0.28);
    }

    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 22px rgba(255, 204, 63, 0.06),
            0 18px 36px rgba(0, 0, 0, 0.34);
    }
}

.listen-focus-audio-stage p {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
}

.listen-focus-play-button,
.listen-focus-stop-button {
    min-width: 250px;
    min-height: 58px;

    padding: 11px 24px;

    border: 2px solid #ffffff;
    border-radius: 17px;

    font-family: Cairo, sans-serif;
    font-size: 19px;
    font-weight: 900;

    cursor: pointer;
}

.listen-focus-play-button {
    background:
        linear-gradient(
            180deg,
            #ffd34e,
            #f1a900
        );

    color: #14355f;

    box-shadow:
        0 7px 0 #b97900,
        0 13px 24px rgba(0, 0, 0, 0.27);
}

.listen-focus-stop-button {
    background:
        linear-gradient(
            180deg,
            #f34f63,
            #bd1730
        );

    color: #ffffff;

    box-shadow:
        0 7px 0 #861024,
        0 13px 24px rgba(0, 0, 0, 0.27);
}

.listen-focus-play-button.hidden,
.listen-focus-stop-button.hidden {
    display: none !important;
}
/* ==========================================
   اسمع وركّز — العداد والتحكيم
========================================== */

.listen-focus-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 6px auto 18px;
}

.listen-focus-timer-box.hidden {
    display: none !important;
}

.listen-focus-timer-label {
    min-width: 260px;
    padding: 8px 20px;

    border: 2px solid #ff9f1c;
    border-radius: 14px;

    background: #fff4df;
    color: #934900;

    font-size: 20px;
    font-weight: 900;
    text-align: center;
}

.listen-focus-timer-circle {
    position: relative;

    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.listen-focus-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.listen-focus-timer-track,
.listen-focus-timer-progress {
    fill: none;
    stroke-width: 11;
}

.listen-focus-timer-track {
    stroke: #ffe1b3;
}

.listen-focus-timer-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;

    stroke-dasharray: 376.99;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
}

#listen-focus-timer-text {
    position: relative;
    z-index: 2;

    color: #ff9411;

    font-size: 47px;
    font-weight: 900;
    line-height: 1;
}

.listen-focus-timer-box.is-warning
.listen-focus-timer-label {
    border-color: #e11d48;
    background: #ffe5ea;
    color: #b00020;
}

.listen-focus-timer-box.is-warning
.listen-focus-timer-progress {
    stroke: #e11d48;
}

.listen-focus-timer-box.is-warning
#listen-focus-timer-text {
    color: #e0002b;
}

.listen-focus-timer-box.is-warning
.listen-focus-timer-circle {
    animation:
        listenFocusTimerPulse 0.65s
        ease-in-out infinite;
}

@keyframes listenFocusTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.listen-focus-submit-answer {
    min-width: 290px;
    min-height: 54px;

    padding: 10px 24px;

    border: 2px solid #ffffff;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffb52e,
            #ef8200
        );

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 0 #ad5800,
        0 11px 22px rgba(0, 0, 0, 0.25);
}

.listen-focus-answer-display {
    width: min(700px, 94%);

    margin: 18px auto;
    padding: 18px 24px;

    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.listen-focus-answer-display strong {
    color: #ffe16b;

    font-size: 28px;
    font-weight: 900;
}

.listen-focus-answer-display.hidden {
    display: none !important;
}

.listen-focus-judgement-buttons {
    width: min(800px, 95%);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    margin: 20px auto 12px;

    direction: rtl;
}

.listen-focus-judgement-buttons.hidden {
    display: none !important;
}

.listen-focus-judgement-buttons button {
    min-height: 72px;
    padding: 13px 20px;

    border: 3px solid #ffffff;
    border-radius: 20px;

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.25);
}

#listen-focus-first-team {
    background:
        linear-gradient(
            180deg,
            #35d56f,
            #159b46,
            #0b7b34
        );

    box-shadow:
        0 8px 0 #066029,
        0 14px 25px rgba(0, 0, 0, 0.28);
}

#listen-focus-second-team {
    background:
        linear-gradient(
            180deg,
            #42baff,
            #1589d0,
            #096eae
        );

    box-shadow:
        0 8px 0 #075586,
        0 14px 25px rgba(0, 0, 0, 0.28);
}

#listen-focus-no-winner {
    grid-column: 1 / -1;

    width: min(290px, 82%);
    min-height: 60px;

    justify-self: center;

    background:
        linear-gradient(
            180deg,
            #718096,
            #4b596c,
            #344052
        );

    box-shadow:
        0 7px 0 #27313f,
        0 13px 24px rgba(0, 0, 0, 0.28);
}

.listen-focus-replay {
    min-width: 280px;
    min-height: 56px;

    display: block;

    margin: 16px auto 4px;
    padding: 11px 24px;

    border: 2px solid #ffffff;
    border-radius: 17px;

    background:
        linear-gradient(
            180deg,
            #ffd34e,
            #f1a900
        );

    color: #17365f;

    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 0 #b97900,
        0 13px 24px rgba(0, 0, 0, 0.27);
}

.listen-focus-replay.hidden {
    display: none !important;
}

@media (max-width: 650px) {
    .listen-focus-card {
        padding: 18px 16px 24px;
    }

    .listen-focus-judgement-buttons {
        grid-template-columns: 1fr;
    }

    #listen-focus-no-winner {
        grid-column: 1;
    }
}

/* ==========================================
   شيفرة — عداد الفريقين والتحكيم الجديد
========================================== */

.cipher-team-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;

    margin: 12px auto 8px;
}

.cipher-team-timer-box.hidden {
    display: none !important;
}

.cipher-team-timer-label {
    order: 2;

    width: 150px;
    min-width: 150px;

    margin: 0 auto;
    padding: 6px 8px;

    border: 2px solid #ff9f1c;
    border-radius: 14px;

    background: #fff4df;
    color: #944900;

    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

.cipher-team-timer-circle {
    order: 1;

    position: relative;

    width: 94px;
    height: 94px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
}

.cipher-team-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.cipher-team-timer-track,
.cipher-team-timer-progress {
    fill: none;
    stroke-width: 11;
}

.cipher-team-timer-track {
    stroke: #ffe1b3;
}

.cipher-team-timer-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;

    stroke-dasharray: 376.99;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
}

#cipher-team-timer-text {
    position: relative;
    z-index: 2;

    color: #ef8500;

    font-size: 43px;
    font-weight: 900;
}

.cipher-team-timer-box.is-warning
.cipher-team-timer-label {
    border-color: #e11d48;
    background: #ffe5ea;
    color: #b00020;
}

.cipher-team-timer-box.is-warning
.cipher-team-timer-progress {
    stroke: #e11d48;
}

.cipher-team-timer-box.is-warning
#cipher-team-timer-text {
    color: #df0028;
}

.cipher-team-timer-box.is-warning
.cipher-team-timer-circle {
    animation:
        cipherTimerPulse 0.65s
        ease-in-out infinite;
}

@keyframes cipherTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.cipher-submit-answer-button {
    min-width: 290px;
    min-height: 52px;

    padding: 9px 22px;

    border: 2px solid #ffffff;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffb52e,
            #ee8100
        );

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 0 #ad5700,
        0 11px 22px rgba(0, 0, 0, 0.24);
}


#cipher-judgement-buttons {
    width: min(800px, 95%);

    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    margin: 18px auto 10px;

    direction: rtl;
}

#cipher-judgement-buttons.hidden {
    display: none !important;
}

#cipher-judgement-buttons button {
    min-height: 70px;
    padding: 13px 20px;

    border: 3px solid #ffffff;
    border-radius: 20px;

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;
}

#cipher-correct-button {
    background:
        linear-gradient(
            180deg,
            #35d56f,
            #159b46,
            #0b7b34
        ) !important;

    box-shadow:
        0 8px 0 #066029,
        0 14px 25px rgba(0, 0, 0, 0.27);
}

#cipher-wrong-button {
    background:
        linear-gradient(
            180deg,
            #42baff,
            #1589d0,
            #096eae
        ) !important;

    box-shadow:
        0 8px 0 #075586,
        0 14px 25px rgba(0, 0, 0, 0.27);
}

#cipher-no-winner-button {
    grid-column: 1 / -1;

    width: min(290px, 82%);
    min-height: 58px;

    justify-self: center;

    background:
        linear-gradient(
            180deg,
            #718096,
            #4b596c,
            #344052
        );

    box-shadow:
        0 7px 0 #27313f,
        0 13px 24px rgba(0, 0, 0, 0.27);
}

@media (max-width: 650px) {
    #cipher-judgement-buttons {
        grid-template-columns: 1fr;
    }

    #cipher-no-winner-button {
        grid-column: 1;
    }
}

/* ==========================================
   زوم — التصميم الجديد للفريقين
========================================== */

/* إخفاء المؤقت القديم وزر الإغلاق وزر الكشف اليدوي */
#zoom-timer,
#zoom-question-close {
    display: none !important;
}

#zoom-question-card {
    overflow-y: hidden !important;
}

.zoom-team-timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin: 8px auto 12px;
}

.zoom-team-timer-box.hidden {
    display: none !important;
}

.zoom-team-timer-label {
    min-width: 245px;
    padding: 7px 18px;

    border: 2px solid #ff9f1c;
    border-radius: 14px;

    background: #fff4df;
    color: #934800;

    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.zoom-team-timer-circle {
    position: relative;

    width: 125px;
    height: 125px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-team-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.zoom-team-timer-track,
.zoom-team-timer-progress {
    fill: none;
    stroke-width: 11;
}

.zoom-team-timer-track {
    stroke: #ffe1b3;
}

.zoom-team-timer-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;

    stroke-dasharray: 376.99;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.3s ease;
}

#zoom-team-timer-text {
    position: relative;
    z-index: 2;

    color: #ed8300;

    font-size: 41px;
    font-weight: 900;
}

.zoom-team-timer-box.is-warning
.zoom-team-timer-label {
    border-color: #e11d48;
    background: #ffe5ea;
    color: #b00020;
}

.zoom-team-timer-box.is-warning
.zoom-team-timer-progress {
    stroke: #e11d48;
}

.zoom-team-timer-box.is-warning
#zoom-team-timer-text {
    color: #df0028;
}

.zoom-team-timer-box.is-warning
.zoom-team-timer-circle {
    animation:
        zoomTeamTimerPulse 0.65s
        ease-in-out infinite;
}

@keyframes zoomTeamTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

.zoom-submit-answer-button {
    min-width: 285px;
    min-height: 50px;

    padding: 8px 22px;

    border: 2px solid #ffffff;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffb52e,
            #ee8100
        );

    color: #ffffff;

    font-family: Cairo, sans-serif;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 0 #ad5700,
        0 11px 22px rgba(0, 0, 0, 0.24);
}

/* ترتيب أزرار التحكيم */
#zoom-question-card .zoom-action-row {
    width: 100% !important;
    display: block !important;
}

#zoom-judgement-buttons {
    width: min(760px, 95%) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;

    margin: 18px auto 10px !important;

    direction: rtl;
}

#zoom-judgement-buttons.hidden {
    display: none !important;
}

#zoom-judgement-buttons button {
    min-height: 68px !important;
    padding: 12px 20px !important;

    border: 3px solid #ffffff !important;
    border-radius: 20px !important;

    color: #ffffff !important;

    font-family: Cairo, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    cursor: pointer;
}

#zoom-correct-button {
    background:
        linear-gradient(
            180deg,
            #35d56f,
            #159b46,
            #0b7b34
        ) !important;

    box-shadow:
        0 8px 0 #066029,
        0 14px 25px rgba(0, 0, 0, 0.27) !important;
}

#zoom-wrong-button {
    background:
        linear-gradient(
            180deg,
            #42baff,
            #1589d0,
            #096eae
        ) !important;

    box-shadow:
        0 8px 0 #075586,
        0 14px 25px rgba(0, 0, 0, 0.27) !important;
}

#zoom-no-winner-button {
    grid-column: 1 / -1;

    width: min(285px, 82%);
    min-height: 58px !important;

    justify-self: center;

    background:
        linear-gradient(
            180deg,
            #718096,
            #4b596c,
            #344052
        ) !important;

    box-shadow:
        0 7px 0 #27313f,
        0 13px 24px rgba(0, 0, 0, 0.27) !important;
}

@media (max-width: 650px) {
    #zoom-judgement-buttons {
        grid-template-columns: 1fr !important;
    }

    #zoom-no-winner-button {
        grid-column: 1;
    }
}

/* إخفاء عناصر زوم عندما تحمل hidden */
#zoom-judgement-buttons.hidden,
#zoom-answer-display.hidden,
#zoom-team-timer-box.hidden {
    display: none !important;
}
/* ضبط شاشة زوم لتظهر كاملة دون تمرير */
.zoom-question-card {
    max-height: 94vh !important;
    padding: 14px 18px !important;
    gap: 8px !important;
    overflow-y: hidden !important;
}

.zoom-image-container {
    min-height: 190px !important;
    height: 190px !important;
    margin: 4px auto !important;
}

#zoom-question-image {
    width: min(360px, 80vw) !important;
    height: 190px !important;
    object-fit: contain !important;
}

.zoom-team-timer-box {
    gap: 5px !important;
    margin: 2px auto !important;
}

.zoom-team-timer-label {
    padding: 7px 20px !important;
    min-height: auto !important;
}

.zoom-team-timer-circle {
    width: 100px !important;
    height: 100px !important;
}

.zoom-team-timer-circle strong {
    font-size: 34px !important;
}

.zoom-submit-answer-button {
    margin-top: 2px !important;
    padding: 10px 24px !important;
    min-height: 48px !important;
}
/* ترتيب أزرار تحكيم زوم في صف واحد */
#zoom-judgement-buttons {
    display: grid !important;
    grid-template-columns: repeat(
        3,
        minmax(180px, 1fr)
    ) !important;
    gap: 22px !important;
    width: min(900px, 94vw) !important;
    margin: 18px auto !important;
    direction: rtl !important;
    align-items: stretch !important;
}

#zoom-judgement-buttons button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    margin: 0 !important;
    grid-column: auto !important;
}

#zoom-correct-button {
    order: 1 !important;
}

#zoom-wrong-button {
    order: 2 !important;
}

#zoom-no-winner-button {
    order: 3 !important;
    grid-column: auto !important;
}

@media (max-width: 650px) {
    #zoom-judgement-buttons {
        grid-template-columns: repeat(
            3,
            minmax(90px, 1fr)
        ) !important;
        gap: 8px !important;
    }

    #zoom-judgement-buttons button {
        font-size: 16px !important;
        padding: 8px 5px !important;
    }
}
/* التصحيح النهائي لترتيب أزرار زوم */
#zoom-judgement-buttons {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 32px !important;
    row-gap: 0 !important;

    width: min(900px, 92vw) !important;
    margin: 20px auto !important;
    padding: 0 !important;
    direction: ltr !important;
}

#zoom-judgement-buttons button {
    width: 100% !important;
    max-width: 260px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: center !important;
    grid-row: 1 !important;
    order: initial !important;
}

/* الفريق الثاني: اليسار */
#zoom-wrong-button {
    grid-column: 1 !important;
}

/* لا أحد: المنتصف */
#zoom-no-winner-button {
    grid-column: 2 !important;
}

/* الفريق الأول: اليمين */
#zoom-correct-button {
    grid-column: 3 !important;
}
/* تفعيل الضغط على زر لا أحد في زوم */
#zoom-no-winner-button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =========================================
   تحسين فئة بدون كلام
========================================= */

.charades-submit-answer-button {
    min-width: 280px;
    padding: 15px 28px;
    border: 2px solid #ffffff;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffb52e, #ef8500);
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        0 7px 0 #a95300,
        0 14px 25px rgba(239, 133, 0, 0.28);
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.charades-submit-answer-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.charades-submit-answer-button:active {
    transform: translateY(5px);
    box-shadow:
        0 2px 0 #a95300,
        0 7px 14px rgba(239, 133, 0, 0.25);
}

.charades-second-team-message {
    width: min(720px, 90%);
    margin: 20px auto;
    padding: 18px 24px;
    border: 2px solid #20a4f3;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        #eaf7ff,
        #ccecff
    );
    color: #063b68;
    font-size: 23px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 10px 25px rgba(32, 164, 243, 0.2);
    animation: charadesMessagePop 0.45s ease;
}

#charades-judgement-buttons {
    width: min(900px, 94%);
    margin: 24px auto 8px;
    display: flex;
    direction: rtl;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
}

#charades-judgement-buttons button {
    flex: 1 1 0;
    min-width: 0;
    max-width: 270px;
    min-height: 76px;
    padding: 14px 18px;
    border: 2px solid #ffffff;
    border-radius: 18px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.charades-correct-button {
    background: linear-gradient(
        180deg,
        #36dc75,
        #07983d
    );
    box-shadow:
        0 7px 0 #046426,
        0 14px 25px rgba(7, 152, 61, 0.28);
}

.charades-no-winner-button {
    background: linear-gradient(
        180deg,
        #8090a6,
        #3e4c61
    );
    box-shadow:
        0 7px 0 #253044,
        0 14px 25px rgba(62, 76, 97, 0.28);
}

.charades-wrong-button {
    background: linear-gradient(
        180deg,
        #35b9ff,
        #087fc5
    );
    box-shadow:
        0 7px 0 #075f96,
        0 14px 25px rgba(8, 127, 197, 0.28);
}

#charades-judgement-buttons button:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

#charades-judgement-buttons button:active {
    transform: translateY(5px);
}

.charades-submit-answer-button.hidden,
.charades-second-team-message.hidden,
#charades-judgement-buttons.hidden {
    display: none !important;
}

@keyframes charadesMessagePop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 760px) {
    #charades-judgement-buttons {
        gap: 10px;
    }

    #charades-judgement-buttons button {
        padding: 12px 8px;
        font-size: 16px;
    }
}

/* امتداد آمن لخلفية شاشة البداية فقط */
#start-screen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#start-screen::before {
    content: "";
    position: absolute;
    inset: -30px;
    background-image: url("screen.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(22px);
    opacity: 0.35;
    transform: scale(1.08);
    z-index: -1;
}

#start-screen .poster-container {
    position: relative;
    z-index: 1;
}

/* ترتيب أزرار تحكيم الأسئلة العادية */
#judgement-btns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    direction: ltr;
}

#btn-first-team {
    grid-column: 1;
    grid-row: 1;
}

#btn-no-winner {
    grid-column: 2;
    grid-row: 1;
}

#btn-second-team {
    grid-column: 3;
    grid-row: 1;
}

/* إبقاء أزرار الاحتساب الداخلية مخفية */
#judgement-btns > #btn-correct,
#judgement-btns > #btn-wrong {
    display: none !important;
}
/* ==========================================
   عداد 60 ثانية للأسئلة العادية
========================================== */

#timer-box.normal-question-timer {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 12px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    text-align: center;
    filter: drop-shadow(0 0 14px rgba(255, 159, 28, 0.38));
}

.normal-timer-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.normal-timer-track,
.normal-timer-progress {
    fill: none;
    stroke-width: 9;
}

.normal-timer-track {
    stroke: rgba(255, 255, 255, 0.18);
}

.normal-timer-progress {
    stroke: #ff9f1c;
    stroke-linecap: round;
    transition:
        stroke-dashoffset 0.9s linear,
        stroke 0.25s ease;
}

.normal-timer-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#normal-timer-team-name {
    max-width: 110px;
    margin-bottom: 5px;
    overflow: hidden;
    color: #ffd27a;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#timer-box #timer-text {
    margin: 0;
    color: #ffffff;
    font-size: 45px;
    font-weight: 1000;
}

.normal-timer-content span {
    margin-top: 5px;
    color: #dceaff;
    font-size: 13px;
    font-weight: 800;
}

/* آخر عشر ثوانٍ */
#timer-box.is-warning {
    animation: normalTimerPulse 0.7s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(244, 51, 67, 0.72));
}

#timer-box.is-warning .normal-timer-progress {
    stroke: #f43343;
}

#timer-box.is-warning #timer-text {
    color: #ff5966;
}

#timer-box.is-warning #normal-timer-team-name {
    color: #ff8790;
}

@keyframes normalTimerPulse {
    50% {
        transform: scale(1.045);
    }
}
/* ==========================================
   عداد الفريق المنافس دون تغطية السؤال
========================================== */

.question-overtime-overlay {
    position: fixed !important;
    inset: auto auto 18px 18px !important;
    z-index: 9999998;
    display: block;
    width: auto;
    height: auto;
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none;
}

.question-overtime-card {
    width: 260px !important;
    padding: 12px 14px 10px !important;
    border-width: 2px !important;
    border-radius: 20px !important;
    background:
        linear-gradient(
            155deg,
            rgba(18, 58, 122, 0.97),
            rgba(7, 26, 67, 0.97)
        ) !important;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(255, 159, 28, 0.3) !important;
}

.question-overtime-label {
    margin-bottom: 4px !important;
    padding: 5px 15px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 0 #c26b00 !important;
}

.question-overtime-timer {
    width: 120px !important;
    height: 120px !important;
    margin: 7px auto 3px !important;
}

#question-overtime-text {
    font-size: 43px !important;
}

.question-overtime-content span {
    margin-top: 4px !important;
    font-size: 13px !important;
}

.question-overtime-card p {
    margin-top: 5px !important;
    font-size: 14px !important;
}
/* ==========================================
   عداد 60 ثانية المستطيل للأسئلة العادية
========================================== */

#timer-box.normal-question-timer {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 72px;
    margin: 0 0 10px;
    padding: 10px 12px 13px;
    box-sizing: border-box;
    border: 2px solid #ff9f1c;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #123a7a,
            #071a43
        );
    text-align: center;
    filter:
        drop-shadow(
            0 0 9px
            rgba(255, 159, 28, 0.35)
        );
}

.normal-timer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    direction: rtl;
}

#normal-timer-team-name {
    max-width: 65%;
    margin: 0;
    overflow: hidden;
    color: #ffd27a;
    font-size: 15px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.normal-timer-number {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}

#timer-box #timer-text {
    margin: 0;
    color: #ffffff;
    font-size: 32px;
    font-weight: 1000;
    line-height: 1;
}

.normal-timer-number span {
    color: #dceaff;
    font-size: 12px;
    font-weight: 800;
}

/* مسار الشريط */
.normal-timer-bar {
    position: absolute;
    right: 10px;
    bottom: 6px;
    left: 10px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

/* الشريط البرتقالي المتناقص */
.normal-timer-progress {
    width: 100%;
    height: 100%;
    margin-left: auto;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #ffd166,
            #ff9f1c
        );
    transition:
        width 0.9s linear,
        background 0.25s ease;
}

/* آخر عشر ثوانٍ */
#timer-box.is-warning {
    border-color: #f43343;
    animation: none;
    filter:
        drop-shadow(
            0 0 11px
            rgba(244, 51, 67, 0.62)
        );
}

#timer-box.is-warning .normal-timer-progress {
    background:
        linear-gradient(
            90deg,
            #ff7b86,
            #f43343
        );
}

#timer-box.is-warning #timer-text,
#timer-box.is-warning #normal-timer-team-name {
    color: #ff6975;
}

/* عداد 30 ثانية في المنتصف تحت السؤال */
.question-overtime-overlay {
    position: fixed !important;
    inset: auto !important;
top: 290px !important;    
    left: 37% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto;
    height: auto;
    transform: translateX(-50%);
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none;
}

/* زر تقديم إجابة الأسئلة العادية */
#normal-submit-answer-button {
    width: 100%;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid #ffb52e;
    border-radius: 9px;
    color: #172547;
    background:
        linear-gradient(
            180deg,
            #ffd76a,
            #ffad1f
        );
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 0 #b96800;
}

#normal-submit-answer-button:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#normal-submit-answer-button:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b96800;
}

#normal-submit-answer-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

/* زر تقديم الإجابة فوق وسائل مساعدة الفريق */
.team-help-panel #normal-submit-answer-button {
    position: absolute;
    top: -270px;
    left: 20%;
    width: 180px;
    height: 56px;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    transform: translateX(-50%);
    white-space: normal;
    line-height: 1.35;
    z-index: 5;
}

/* إخفاؤه عندما لا يوجد سؤال نشط */
.team-help-panel #normal-submit-answer-button:disabled {
    display: none;
}

/* الحفاظ على تمركزه أثناء الحركة */
.team-help-panel
#normal-submit-answer-button:hover:not(:disabled) {
    transform:
        translateX(-50%)
        translateY(-1px);
}

.team-help-panel
#normal-submit-answer-button:active:not(:disabled) {
    transform:
        translateX(-50%)
        translateY(2px);
}
/* موقع الزر عندما يكون فوق وسائل الفريق الأول */
#team1-help-panel #normal-submit-answer-button {
    left: 362%;
}

/* موقع الزر عندما يكون فوق وسائل الفريق الثاني */
#team2-help-panel #normal-submit-answer-button {
    left: 80%;
}


/* ==========================================
   أزرار الحكم الثلاثة في فئة الأعلام
========================================== */

#flags-result-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: min(650px, 94%);
    margin: 8px auto 0;
    direction: ltr;
}

#flags-result-buttons.hidden {
    display: none !important;
}

#flags-first-team-button {
    grid-column: 3;
    grid-row: 1;
}

#flags-no-winner-button {
    grid-column: 2;
    grid-row: 1;
}

#flags-second-team-button {
    grid-column: 1;
    grid-row: 1;
}

#flags-result-buttons button {
    min-width: 0;
    padding: 13px 12px;
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

#flags-first-team-button {
    background: #27ae60;
}

#flags-second-team-button {
    background: #2d8bea;
}

#flags-no-winner-button {
    background: #d83b3b;
}

#flags-result-buttons button:hover {
    filter: brightness(1.08);
}

/* ترتيب إجابة وأزرار فئة الأعلام دون تداخل */
#flags-result-buttons {
    transform: none !important;
    margin-top: 12px !important;
}

#flags-answer-box {
    margin: 10px auto 0 !important;
}
/* مؤقت وزر تقديم الإجابة داخل فئة الأعلام */
.flags-normal-timer-slot {
    width: min(360px, 90%);
    margin: 8px auto 6px;
}

.flags-normal-timer-slot
#timer-box.normal-question-timer {
    width: 100%;
    min-height: 62px;
    margin: 0;
}

.flags-submit-answer-slot {
    width: min(300px, 85%);
    margin: 6px auto 10px;
}

.flags-submit-answer-slot
#normal-submit-answer-button {
    position: static;
    display: block;
    width: 100%;
    margin: 0;
    transform: none !important;
}

.flags-submit-answer-slot
#normal-submit-answer-button:disabled {
    display: none;
}

/* ==========================================
   ترتيب نهائي لنافذة الأعلام
========================================== */

.flags-question-card {
    width: min(900px, 96vw) !important;
    height: min(720px, 94vh) !important;
    max-height: 94vh !important;
    padding: 18px 28px !important;
    box-sizing: border-box;
    overflow-y: auto;
}

/* مساحة صورة العلم */
.flags-question-image-box {
    min-height: 0 !important;
    height: 300px !important;
    max-height: 300px !important;
    margin: 0 auto 8px !important;
}

#flags-question-image {
    max-width: 92% !important;
    max-height: 300px !important;
}

/* تقليل الفراغات حول المؤقت */
.flags-normal-timer-slot {
    margin: 6px auto !important;
}

.flags-submit-answer-slot {
    margin: 6px auto 10px !important;
}

/* إلغاء الرفع القديم الذي سبب التداخل */
#flags-show-answer {
    transform: none !important;
    margin: 12px auto !important;
}

/* صندوق الإجابة */
#flags-answer-box {
    margin: 10px auto !important;
    padding: 11px 18px !important;
}

/* أزرار الفريقين ولا أحد */
#flags-result-buttons {
    transform: none !important;
    margin: 12px auto 0 !important;
}

/* إخفاء زر تقديم الإجابة بعد ظهور إجابة العلم */
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
#normal-submit-answer-button {
    display: none !important;
}
/* إخفاء المؤقت بعد ظهور إجابة العلم */
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
#timer-box {
    display: none !important;
}

/* التحكم اليدوي بمكان عداد الـ30 ثانية */
.question-overtime-overlay {
    left: 38% !important;  /* يمين ويسار */
    top: 250px !important; /* فوق وتحت */
}

/* عنوان سؤال الأعلام */
.flags-question-title {
    margin: 0 0 10px !important;
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
}


/* السماح بإخفاء مؤقت فئة بدون كلام */
#charades-timer.hidden {
    display: none !important;
}
/* اسم الفريق تحت مؤقت بدون كلام */
.charades-team-name {
    position: absolute;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);

    min-width: 150px;
    padding: 7px 12px;

    color: #0b1f44;
    background: #fff3df;
    border: 2px solid #ff9f1c;
    border-radius: 12px;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
/* تصغير بطاقتي الفريقين لمنح البازل ارتفاعًا أكبر */
#game-screen .header-card {
    padding: 4px 8px;
    min-height: 0;
}

#game-screen .header-card h3 {
    margin: 0 0 2px;
    font-size: 18px;
    line-height: 1.15;
}

#game-screen .team-score {
    font-size: 1.5rem;
    line-height: 1.1;
}
/* توحيد قياسات لوحتي وسائل المساعدة */
#team1-help-panel,
#team2-help-panel {
    width: 105px;
    height: 289px;
    min-height: 289px;
}
/* تصغير شريط النقاط لمنح البازل ارتفاعًا إضافيًا */
#game-screen .round-bar {
    gap: 6px;
    margin-bottom: 4px;
}

#game-screen .round-box {
    padding: 3px 5px;
    font-size: 0.78rem;
    line-height: 1.15;
}

#game-screen .exit-btn {
    padding: 4px 12px;
    line-height: 1.15;
}

/* معلومات النقاط تحت زر تخمين الصورة */
.game-points-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 8px;
}

.game-points-summary .round-box {
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    font-size: 0.78rem;
    line-height: 1.2;
}

/* إزالة ارتفاع الشريط القديم مع إبقاء زر الخروج */
#game-screen .round-bar {
    position: relative;
    display: block;
    height: 0;
    min-height: 0;
    margin: 0 !important;
    z-index: 30;
}

#game-screen .round-bar .exit-btn {
    position: absolute;
    left: 0;
    bottom: -30px;
}

/* موقع مستقل لعداد الـ30 ثانية داخل فئة الأعلام فقط */
body:has(#flags-question-overlay:not(.hidden))
.question-overtime-overlay {
    left: 73% !important;  /* يمين ويسار في الأعلام فقط */
    top: 400px !important; /* فوق وتحت في الأعلام فقط */
}
/* منع عمودي المساعدة من تغطية البازل */
#team1-help-panel,
#team2-help-panel {
    width: 75px;
}

/* لوحة الفريق الثاني نحو الحافة اليسرى */
#team2-help-panel {
    left: 10px;
}

/* لوحة الفريق الأول نحو الحافة اليمنى للبازل */
#team1-help-panel {
    right: 365px;
}

#team1-help-panel .team-help-title,
#team2-help-panel .team-help-title {
    font-size: 12px;
}

/* إلغاء جميع أزرار تقديم إجابة الفريق في كل الفئات */
button[id*="submit-answer"] {
    display: none !important;
}
/* =========================================
   التصميم الجديد لأزرار فئة الأعلام
========================================= */

#flags-question-overlay button {
    min-height: 54px;
    padding: 12px 26px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;

    color: #ffffff;
    font-family: "Cairo", sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.28),
        0 12px 24px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

/* زر إظهار الإجابة */
#flags-show-answer {
    background: linear-gradient(
        135deg,
        #168cff,
        #0757d9
    ) !important;
}

/* زر الفريق صاحب الدور */
#flags-first-team-button {
    background: linear-gradient(
        135deg,
        #36d278,
        #159447
    ) !important;
}

/* زر لا أحد */
#flags-no-winner-button {
    background: linear-gradient(
        135deg,
        #ff5a67,
        #c9273c
    ) !important;
}

/* زر الفريق الثاني */
#flags-second-team-button {
    background: linear-gradient(
        135deg,
        #ffbd35,
        #df7e00
    ) !important;
}

/* عند مرور الماوس */
#flags-question-overlay button:hover {
    transform: translateY(-3px);

    filter: brightness(1.10);

    box-shadow:
        0 10px 0 rgba(0, 0, 0, 0.25),
        0 16px 30px rgba(0, 0, 0, 0.38);
}

/* عند الضغط */
#flags-question-overlay button:active {
    transform: translateY(5px);

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.30),
        0 5px 12px rgba(0, 0, 0, 0.25);
}

/* رفع زر إظهار الإجابة في فئة الشيفرة */
#cipher-show-answer {
    position: relative;
    transform: translateY(-20px);
    flex-shrink: 0;
}

/* =========================================
   التصميم النهائي لأزرار فئة الشيفرة
========================================= */

/* زر إظهار الإجابة */
#cipher-show-answer {
    min-width: 280px;
    min-height: 58px;
    padding: 12px 30px;

    border: 3px solid #fff3b0 !important;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffd85a 0%,
            #ffad17 55%,
            #e97c00 100%
        ) !important;

    color: #452500 !important;

    font-family: "Cairo", sans-serif;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;
    flex-shrink: 0;

    transform: translateY(-20px);

    box-shadow:
        0 8px 0 #a95100,
        0 14px 28px rgba(0, 0, 0, 0.30),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

#cipher-show-answer:hover {
    transform: translateY(-24px);
    filter: brightness(1.08);

    box-shadow:
        0 11px 0 #a95100,
        0 18px 32px rgba(0, 0, 0, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.70);
}

#cipher-show-answer:active {
    transform: translateY(-14px);

    box-shadow:
        0 3px 0 #a95100,
        0 7px 14px rgba(0, 0, 0, 0.25);
}


/* جميع أزرار التحكيم */
#cipher-judgement-buttons button {
    min-height: 65px;
    padding: 13px 24px;

    border: 3px solid rgba(255, 255, 255, 0.80) !important;
    border-radius: 19px !important;

    color: #ffffff !important;

    font-family: "Cairo", sans-serif;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}


/* الفريق صاحب الدور */
#cipher-correct-button {
    background:
        linear-gradient(
            180deg,
            #4ce786,
            #19aa52,
            #087735
        ) !important;

    box-shadow:
        0 8px 0 #055b28,
        0 14px 26px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.40) !important;
}


/* الفريق المنافس */
#cipher-wrong-button {
    background:
        linear-gradient(
            180deg,
            #55c8ff,
            #168dd2,
            #08649f
        ) !important;

    box-shadow:
        0 8px 0 #064d7b,
        0 14px 26px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.40) !important;
}


/* لا أحد */
#cipher-no-winner-button {
    background:
        linear-gradient(
            180deg,
            #ff6673,
            #dc3045,
            #a8182b
        ) !important;

    box-shadow:
        0 8px 0 #811020,
        0 14px 26px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}


/* حركة الأزرار */
#cipher-judgement-buttons button:hover {
    transform: translateY(-4px);
    filter: brightness(1.10);
}

#cipher-judgement-buttons button:active {
    transform: translateY(5px);
    filter: brightness(0.96);

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 6px 12px rgba(0, 0, 0, 0.22) !important;
}
/* =========================================
   زر إظهار الإجابة الجديد في فئة زوم
========================================= */

#zoom-question-overlay #zoom-show-answer {
    width: 280px !important;
    min-width: 280px !important;
    min-height: 58px !important;

    margin: 0 auto !important;
    padding: 12px 28px !important;

    position: relative !important;
    z-index: 10 !important;

    transform: translateY(-25px) !important;

    border: 3px solid #bce8ff !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            180deg,
            #5ac8ff 0%,
            #168cff 52%,
            #075cc2 100%
        ) !important;

    color: #ffffff !important;

    font-family: "Cairo", sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;

    cursor: pointer;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.28);

    box-shadow:
        0 8px 0 #06468f,
        0 14px 28px rgba(0, 0, 0, 0.30),
        inset 0 2px 0 rgba(255, 255, 255, 0.55) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease !important;
}

#zoom-question-overlay #zoom-show-answer:hover {
    transform: translateY(-30px) !important;
    filter: brightness(1.10);

    box-shadow:
        0 11px 0 #06468f,
        0 18px 32px rgba(0, 0, 0, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.60) !important;
}

#zoom-question-overlay #zoom-show-answer:active {
    transform: translateY(-19px) !important;

    box-shadow:
        0 3px 0 #06468f,
        0 7px 14px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================
   مقارنة صورة الزوم مع الصورة الكاملة
========================================= */

.zoom-image-container.zoom-answer-comparison {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 24px !important;

    width: 100% !important;
    padding: 12px !important;

    box-sizing: border-box;
}

/* شكل الصورتين في صفحة الإجابة */
.zoom-image-container.zoom-answer-comparison
.zoom-question-image {
    flex: 0 1 calc(50% - 12px);

    padding: 8px;

    background: #ffffff;

    border: 3px solid #35a9ff;
    border-radius: 18px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px rgba(255, 255, 255, 0.60);

    box-sizing: border-box;
}

/* إطار مختلف قليلًا لصورة الزوم */
.zoom-image-container.zoom-answer-comparison
#zoom-original-image {
    border-color: #ffb526;
}
/* إخفاء صورة المقارنة في صفحة سؤال زوم الأولى */
#zoom-original-image.hidden {
    display: none !important;
}
/* إظهار زر الإجابة في الصفحة الأولى من فئة ركّز */
.focus-question-card:has(
    #focus-answer-display.hidden
)
#focus-show-answer {
    display: inline-block !important;
}

/* إخفاء الزر بعد ظهور الإجابة */
.focus-question-card:has(
    #focus-answer-display:not(.hidden)
)
#focus-show-answer {
    display: none !important;
}
/* =========================================
   تجميل زر وصندوق الإجابة في فئة ركّز
========================================= */

/* زر إظهار الإجابة */
#focus-show-answer {
    min-width: 290px;
    min-height: 58px;

    padding: 12px 30px;
    margin: 12px auto;

    border: 3px solid #fff1a8 !important;
    border-radius: 18px !important;

    background:
        linear-gradient(
            180deg,
            #ffe269 0%,
            #ffb51e 55%,
            #e77e00 100%
        ) !important;

    color: #422500 !important;

    font-family: "Cairo", sans-serif;
    font-size: 20px !important;
    font-weight: 900 !important;

    cursor: pointer;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45);

    box-shadow:
        0 8px 0 #a95300,
        0 14px 28px rgba(0, 0, 0, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

#focus-show-answer:hover {
    transform: translateY(-4px);
    filter: brightness(1.08);

    box-shadow:
        0 11px 0 #a95300,
        0 18px 32px rgba(0, 0, 0, 0.36),
        inset 0 2px 0 rgba(255, 255, 255, 0.70);
}

#focus-show-answer:active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #a95300,
        0 7px 14px rgba(0, 0, 0, 0.25);
}


/* صندوق الإجابة الصحيحة */
#focus-answer-display {
    width: min(580px, 90%);

    margin: 18px auto;
    padding: 18px 26px;

    border: 3px solid #68d8ff;
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 112, 190, 0.96),
            rgba(8, 53, 112, 0.98)
        );

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;
    text-align: center;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* نص الإجابة نفسه */
#focus-answer-text {
    display: inline-block;

    margin-right: 7px;
    padding: 5px 13px;

    border-radius: 10px;

    background: #ffca35;
    color: #392000;

    font-size: 24px;
    font-weight: 900;
}
/* =========================================
   زر إظهار الإجابة — اسمع وركّز
========================================= */

#listen-focus-show-answer {
    display: block;

    min-width: 290px;
    min-height: 58px;

    margin: 14px auto;
    padding: 12px 30px;

    border: 3px solid #fff1a8;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffe269 0%,
            #ffb51e 55%,
            #e77e00 100%
        );

    color: #422500;

    font-family: "Cairo", sans-serif;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45);

    box-shadow:
        0 8px 0 #a95300,
        0 14px 28px rgba(0, 0, 0, 0.30),
        inset 0 2px 0 rgba(255, 255, 255, 0.65);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

#listen-focus-show-answer:hover {
    transform: translateY(-4px);
    filter: brightness(1.08);

    box-shadow:
        0 11px 0 #a95300,
        0 18px 32px rgba(0, 0, 0, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.70);
}

#listen-focus-show-answer:active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #a95300,
        0 7px 14px rgba(0, 0, 0, 0.24);
}

/* السماح بإخفائه في صفحة الإجابة */
#listen-focus-show-answer.hidden {
    display: none !important;
}
/* =========================================
   جعل بطاقة الشراء كاملة قابلة للضغط
========================================= */

.pg-package-card {
    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.pg-package-card:hover {
    transform: translateY(-5px);

    border-color: #249cff;

    box-shadow:
        0 16px 34px rgba(26, 129, 230, 0.22);
}

/* البطاقة التي تم الضغط عليها */
.pg-package-card.pg-package-selected {
    border: 3px solid #75d4ff !important;

    background:
        linear-gradient(
            145deg,
            #168dff,
            #0758c8
        ) !important;

    box-shadow:
        0 0 0 4px rgba(66, 181, 255, 0.20),
        0 18px 38px rgba(5, 86, 183, 0.36) !important;

    transform: translateY(-5px);
}

/* تغيير النصوص داخل البطاقة المحددة */
.pg-package-card.pg-package-selected h4,
.pg-package-card.pg-package-selected > strong {
    color: #ffffff !important;
}

.pg-package-card.pg-package-selected p,
.pg-package-card.pg-package-selected > strong small {
    color: #d9efff !important;
}

.pg-package-card.pg-package-selected
> div > span {
    color: #ffe16a !important;
}
/* تجميل السؤال بصريًا فقط دون التأثير على المساحة */
#game-screen #question-text {
    background:
        linear-gradient(
            135deg,
            #1853ae,
            #103b86 52%,
            #09285f
        ) !important;

    border-color: #ffc83d !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.50);

    box-shadow:
        0 0 18px rgba(58, 167, 255, 0.38),
        inset 0 2px 0 rgba(255, 255, 255, 0.16),
        inset 0 -4px 0 rgba(0, 0, 0, 0.18) !important;

    outline:
        1px solid rgba(255, 222, 108, 0.45);

    outline-offset: -5px;
}
/* =========================================
   نافذة الإجابة للأسئلة العادية
========================================= */

.normal-answer-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: transparent;

backdrop-filter: none;
-webkit-backdrop-filter: none;

    direction: rtl;
}

.normal-answer-overlay.hidden {
    display: none !important;
}

.normal-answer-card {
    position: relative;

    width: min(820px, 82vw);
    min-height: 135px;

    padding: 25px 75px 22px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 3px solid #ffd34f;
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #1553ae,
            #0b347d 55%,
            #071f52
        );

    color: #ffffff;
    text-align: center;

    box-shadow:
        0 12px 0 #082253,
        0 24px 55px rgba(0, 0, 0, 0.48),
        0 0 30px rgba(51, 168, 255, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

.normal-answer-label {
    display: block;

    margin-bottom: 10px;

    color: #ffe169;

    font-size: 21px;
    font-weight: 900;
}

#normal-answer-text {
    color: #ffffff;

    font-size: 31px;
    font-weight: 900;
    line-height: 1.4;

    text-shadow:
        0 3px 4px rgba(0, 0, 0, 0.42);
}

/* زر الإغلاق */
.normal-answer-close {
    position: absolute;
    top: 12px;
    left: 14px;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #ff6673,
            #c92138
        );

    color: #ffffff;

    font-size: 29px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 0 #861425,
        0 9px 18px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.normal-answer-close:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
}

.normal-answer-close:active {
    transform: translateY(3px);
}
.normal-answer-card {
    transform: translateX(-175px);
}
/* السماح بالضغط على الصفحة خلف نافذة الإجابة */
.normal-answer-overlay {
    pointer-events: none;
}

.normal-answer-card {
    pointer-events: auto;
}

/* =========================================
   أزرار التحكيم ثلاثية الأبعاد
========================================= */

#btn-first-team,
#btn-second-team,
#btn-no-winner {
    position: relative;

    min-height: 66px;
    padding: 10px 12px;

    border: 3px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 15px !important;

    color: #ffffff !important;

    font-family: "Cairo", sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;

    cursor: pointer;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

/* الفريق الأول — أزرق */
#btn-first-team {
    background:
        linear-gradient(
            180deg,
            #55baff,
            #258df1 55%,
            #0863b9
        ) !important;

    box-shadow:
        0 7px 0 #064b8c,
        0 12px 22px rgba(0, 0, 0, 0.27),
        inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;
}

/* لا أحد — أحمر */
#btn-no-winner {
    background:
        linear-gradient(
            180deg,
            #ff6671,
            #e83d4c 55%,
            #b81e30
        ) !important;

    box-shadow:
        0 7px 0 #871525,
        0 12px 22px rgba(0, 0, 0, 0.27),
        inset 0 2px 0 rgba(255, 255, 255, 0.38) !important;
}

/* الفريق الثاني — أخضر */
#btn-second-team {
    background:
        linear-gradient(
            180deg,
            #4de585,
            #20b75b 55%,
            #087e39
        ) !important;

    box-shadow:
        0 7px 0 #05612b,
        0 12px 22px rgba(0, 0, 0, 0.27),
        inset 0 2px 0 rgba(255, 255, 255, 0.40) !important;
}

/* مرور الماوس */
#btn-first-team:hover,
#btn-second-team:hover,
#btn-no-winner:hover {
    transform: translateY(-3px);
    filter: brightness(1.10);
}

/* الضغط الحقيقي */
#btn-first-team:active,
#btn-second-team:active,
#btn-no-winner:active {
    transform: translateY(5px);

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 5px 10px rgba(0, 0, 0, 0.23) !important;
}
/* =========================================
   حركة ظهور نافذة الإجابة
========================================= */

.normal-answer-overlay:not(.hidden)
.normal-answer-card {
    animation:
        normalAnswerAppear 0.32s ease-out;
}

@keyframes normalAnswerAppear {
    from {
        opacity: 0;
        filter: blur(4px) brightness(1.25);
    }

    to {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

/* حركة خفيفة للنص */
.normal-answer-overlay:not(.hidden)
#normal-answer-text {
    animation:
        normalAnswerTextAppear 0.42s ease-out;
}

@keyframes normalAnswerTextAppear {
    from {
        opacity: 0;
        letter-spacing: 4px;
    }

    to {
        opacity: 1;
        letter-spacing: 0;
    }
}
/* =========================================
   شكل ثلاثي الأبعاد للبازل دون تغيير القياس
========================================= */

/* إطار لوحة البازل */
#game-screen .puzzle-image {
    box-shadow:
        0 0 0 2px rgba(117, 204, 255, 0.24),
        0 10px 24px rgba(0, 0, 0, 0.30),
        inset 0 2px 0 rgba(255, 255, 255, 0.20) !important;
}

/* قطع البازل */
#game-screen .puzzle-tile {
    background:
        linear-gradient(
            180deg,
            #3159b2 0%,
            #244695 52%,
            #173375 100%
        ) !important;

    border-color:
        rgba(105, 193, 255, 0.78) !important;

    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.13),
        inset 0 -4px 0 rgba(3, 19, 62, 0.42),
        inset 3px 0 0 rgba(255, 255, 255, 0.05) !important;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.48);

    transition:
        background 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease !important;
}

/* مرور الماوس دون تحريك القطعة */
#game-screen .puzzle-tile:hover {
    background:
        linear-gradient(
            180deg,
            #4482eb,
            #2863cf 55%,
            #17459e
        ) !important;

    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.24),
        inset 0 -4px 0 rgba(0, 30, 92, 0.44),
        0 0 12px rgba(54, 164, 255, 0.52) !important;

    filter: brightness(1.08);
    transform: none !important;
}

/* الحفاظ على القطعة المختارة ذهبية وبارزة */
#game-screen .puzzle-tile.selected,
#game-screen .puzzle-tile.selected-tile {
    background:
        linear-gradient(
            180deg,
            #fff08a,
            #ffc83d 55%,
            #e68b00
        ) !important;

    box-shadow:
        inset 0 3px 0 rgba(255, 255, 255, 0.65),
        inset 0 -4px 0 rgba(156, 77, 0, 0.34),
        0 0 18px #ffbd2e !important;
}
/* تصغير خط اسم الفريق داخل وسائل المساعدة فقط */
.team-help-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
}
/* =========================================
   زر الخروج الاحترافي
========================================= */

#btn-exit-game {
    position: relative;

    min-width: 72px;
    min-height: 34px;

    padding: 5px 13px;

    border: 2px solid #ffb2b8 !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            180deg,
            #ff6670,
            #df3744 55%,
            #a91e2c
        ) !important;

    color: #ffffff !important;

    font-family: "Cairo", sans-serif;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.30);

    box-shadow:
        0 5px 0 #7d1521,
        0 9px 17px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.38) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

#btn-exit-game::before {
    content: "↪";
    display: inline-block;

    margin-left: 5px;

    font-size: 15px;
    font-weight: 900;
}

#btn-exit-game:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);

    box-shadow:
        0 7px 0 #7d1521,
        0 12px 21px rgba(0, 0, 0, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.42) !important;
}

#btn-exit-game:active {
    transform: translateY(4px);

    box-shadow:
        0 2px 0 #7d1521,
        0 5px 9px rgba(0, 0, 0, 0.24) !important;
}
/* =========================================
   التصميم ثلاثي الأبعاد لوسائل المساعدة
========================================= */

/* مستطيل وسائل مساعدة الفريق */
.team-help-panel {
    background:
        linear-gradient(
            145deg,
            #0c4789 0%,
            #082f66 52%,
            #051e48 100%
        ) !important;

    border-color: #48b8ff !important;

    box-shadow:
        0 7px 0 #031a3d,
        0 13px 25px rgba(0, 0, 0, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.15),
        inset 0 -5px 0 rgba(0, 0, 0, 0.20) !important;
}

/* اسم الفريق */
.team-help-title {
    color: #73d7ff !important;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.50),
        0 0 10px rgba(71, 192, 255, 0.42);
}

/* أزرار وسائل المساعدة */
.team-help-icon {
    border: 2px solid #69caff !important;

    background:
        linear-gradient(
            180deg,
            #1769b6 0%,
            #0c4c92 55%,
            #063366 100%
        ) !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.42);

    box-shadow:
        0 5px 0 #03264e,
        0 9px 15px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.24) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}

/* مرور الماوس */
.team-help-icon:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.13);

    box-shadow:
        0 8px 0 #03264e,
        0 13px 20px rgba(0, 0, 0, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.30) !important;
}

/* الضغط */
.team-help-icon:active:not(:disabled) {
    transform: translateY(4px);

    box-shadow:
        0 2px 0 #03264e,
        0 5px 9px rgba(0, 0, 0, 0.24) !important;
}

/* وسيلة المساعدة المستخدمة أو المعطلة */
.team-help-icon:disabled,
.team-help-icon.used {
    filter: grayscale(0.75) brightness(0.70);
    opacity: 0.55;

    transform: none !important;

    box-shadow:
        0 2px 0 #031a35,
        inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;

    cursor: not-allowed;
}
/* ==========================================
   فئة حروف متحركة
========================================== */

.moving-letters-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;
    box-sizing: border-box;

    background:
        radial-gradient(
            circle at top,
            rgba(25, 92, 180, 0.35),
            rgba(2, 15, 45, 0.94)
        );
}

.moving-letters-overlay.hidden {
    display: none !important;
}

.moving-letters-card {
    width: min(1000px, 96vw);
    height: min(680px, 94vh);

    display: flex;
    flex-direction: column;

    padding: 18px 22px;
    box-sizing: border-box;

    color: #ffffff;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #0d3f82,
            #061f50
        );

    border: 3px solid #42b5ff;
    border-radius: 26px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.moving-letters-title {
    margin: 0 0 10px;

    color: #ffcb36;

    font-size: 30px;
    font-weight: 900;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.3);
}

.moving-letters-clue {
    flex: 0 0 auto;

    width: min(820px, 92%);
    margin: 0 auto 12px;
    padding: 12px 20px;

    box-sizing: border-box;

    color: #ffffff;
    font-size: 25px;
    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #245fb8,
            #16438c
        );

    border: 2px solid #79caff;
    border-radius: 17px;

    box-shadow:
        0 6px 0 #08275c,
        0 10px 22px rgba(0, 0, 0, 0.28);
}

/* المساحة التي تتحرك داخلها الحروف */
.moving-letters-stage {
    position: relative;

    flex: 1;
    min-height: 260px;
    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #f9fcff,
            #dcecff
        );

    border: 3px solid #67bdff;
    border-radius: 22px;

    box-shadow:
        inset 0 5px 18px rgba(5, 42, 95, 0.2),
        0 8px 18px rgba(0, 0, 0, 0.25);
}

/* كرة الحرف */
.moving-letter-ball {
    position: absolute;
        top: 0;
    left: 0;

    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;

    user-select: none;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 34% 25%,
            #ff9b62,
            #ff633d 55%,
            #d93720
        );

    border: 3px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 7px 0 #a82518,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45);

    box-sizing: border-box;

    will-change: transform;
}

.moving-letters-show-answer {
    flex: 0 0 auto;

    min-width: 250px;
    margin: 14px auto 2px;
    padding: 13px 28px;

    color: #092656;
    font-size: 21px;
    font-weight: 900;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #ffe56a,
            #ffb91f
        );

    border: 2px solid #fff1a7;
    border-radius: 16px;

    box-shadow:
        0 7px 0 #c37a08,
        0 11px 20px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.moving-letters-show-answer:hover {
    transform: translateY(-2px);

    box-shadow:
        0 9px 0 #c37a08,
        0 14px 24px rgba(0, 0, 0, 0.35);
}

.moving-letters-show-answer:active {
    transform: translateY(5px);

    box-shadow:
        0 2px 0 #c37a08;
}

.moving-letters-answer {
    margin: 13px auto 0;
    padding: 12px 24px;

    color: #ffffff;
    font-size: 23px;
    font-weight: 800;

    background: rgba(255, 255, 255, 0.13);

    border: 2px solid #ffcd3c;
    border-radius: 15px;
}

.moving-letters-answer strong {
    color: #ffda49;
    font-size: 29px;
}

.moving-letters-result-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;

    margin-top: 15px;
}

.moving-letters-result-buttons.hidden,
.moving-letters-answer.hidden {
    display: none !important;
}

.moving-letters-result-buttons button {
    min-width: 185px;
    padding: 13px 20px;

    color: #ffffff;
    font-size: 19px;
    font-weight: 900;

    cursor: pointer;

    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 15px;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.moving-letters-result-buttons button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.moving-letters-first-team {
    background:
        linear-gradient(
            180deg,
            #3fa4ff,
            #1671d7
        );

    box-shadow: none !important;
}

.moving-letters-no-winner {
    background:
        linear-gradient(
            180deg,
            #ff6262,
            #d93242
        );

    box-shadow: none !important;
}

.moving-letters-second-team {
    background:
        linear-gradient(
            180deg,
            #39d77a,
            #16a853
        );

    box-shadow: none !important;
}

@media (max-height: 720px) {
    .moving-letters-card {
        height: 96vh;
        padding: 12px 18px;
    }

    .moving-letters-title {
        font-size: 25px;
        margin-bottom: 6px;
    }

    .moving-letters-clue {
        padding: 9px 16px;
        margin-bottom: 9px;
        font-size: 21px;
    }

    .moving-letter-ball {
        width: 56px;
        height: 56px;
        font-size: 29px;
    }

    .moving-letters-show-answer {
        margin-top: 10px;
        padding: 10px 24px;
    }
}
/* ==========================================
   مؤقت فئة حروف متحركة
========================================== */

.moving-letters-timer-box {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin: 2px auto 12px;
}

.moving-letters-timer-box.hidden {
    display: none !important;
}

.moving-letters-timer-label {
    min-width: 230px;
    padding: 9px 18px;

    box-sizing: border-box;

    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    text-align: center;

    background:
        linear-gradient(
            180deg,
            #2f85e8,
            #1553a5
        );

    border: 2px solid #80c9ff;
    border-radius: 14px;

    box-shadow:
        0 5px 0 #092f6c,
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.moving-letters-timer-circle {
    position: relative;

    width: 88px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.moving-letters-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.moving-letters-timer-track,
.moving-letters-timer-progress {
    fill: none;
    stroke-width: 11;
}

.moving-letters-timer-track {
    stroke: rgba(255, 255, 255, 0.22);
}

.moving-letters-timer-progress {
    stroke: #ffca32;
    stroke-linecap: round;

    stroke-dasharray: 326.73;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.25s ease;
}

#moving-letters-timer-text {
    position: relative;
    z-index: 2;

    color: #ffdc58;
    font-size: 31px;
    font-weight: 900;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.moving-letters-submit-answer {
    min-width: 230px;
    padding: 10px 18px;

    color: #082957;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #bde5ff
        );

    border: 2px solid #ffffff;
    border-radius: 14px;

    box-shadow:
        0 5px 0 #5c9ac5,
        0 8px 16px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.moving-letters-submit-answer:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 0 #5c9ac5,
        0 11px 20px rgba(0, 0, 0, 0.3);
}

.moving-letters-submit-answer:active {
    transform: translateY(4px);

    box-shadow:
        0 1px 0 #5c9ac5;
}

/* آخر عشر ثوانٍ */
.moving-letters-timer-box.is-warning
.moving-letters-timer-label {
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #f04c5e,
            #b5142c
        );

    border-color: #ff9aa6;
}

.moving-letters-timer-box.is-warning
.moving-letters-timer-progress {
    stroke: #ff3e59;
}

.moving-letters-timer-box.is-warning
#moving-letters-timer-text {
    color: #ff667b;
}

.moving-letters-timer-box.is-warning
.moving-letters-timer-circle {
    animation:
        movingLettersTimerPulse
        0.65s ease-in-out infinite;
}

@keyframes movingLettersTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@media (max-width: 760px) {
    .moving-letters-timer-box {
        gap: 8px;
    }

    .moving-letters-timer-label,
    .moving-letters-submit-answer {
        min-width: 0;
        width: 32%;
        padding: 8px 6px;
        font-size: 14px;
    }

    .moving-letters-timer-circle {
        width: 75px;
        height: 75px;
    }

    #moving-letters-timer-text {
        font-size: 27px;
    }
}
/* اصطفاف الدوائر عند إظهار الإجابة */

.moving-letter-ball.is-arranged {
    transition:
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    box-shadow:
        0 7px 0 #a82518,
        0 12px 22px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 196, 70, 0.7),
        inset 0 3px 4px rgba(255, 255, 255, 0.45);
}
/* ==========================================
   فئة جاي بالغلط
========================================== */

.odd-one-out-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;
    box-sizing: border-box;

    background:
        radial-gradient(
            circle at top,
            rgba(33, 118, 196, 0.35),
            rgba(2, 15, 45, 0.94)
        );
}

.odd-one-out-overlay.hidden {
    display: none !important;
}

.odd-one-out-card {
    width: min(1000px, 96vw);
    height: min(680px, 94vh);

    display: flex;
    flex-direction: column;

    padding: 17px 21px;
    box-sizing: border-box;

    color: #ffffff;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #0d4082,
            #061e4c
        );

    border: 3px solid #48b8ff;
    border-radius: 26px;

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.odd-one-out-title {
    margin: 0 0 9px;

    color: #ffcc38;
    font-size: 30px;
    font-weight: 900;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.32);
}

.odd-one-out-instruction {
    width: min(810px, 92%);
    margin: 0 auto 10px;
    padding: 10px 18px;

    box-sizing: border-box;

    color: #ffffff;
    font-size: 23px;
    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #2969bd,
            #17468e
        );

    border: 2px solid #83ceff;
    border-radius: 16px;

    box-shadow:
        0 5px 0 #08285e,
        0 9px 18px rgba(0, 0, 0, 0.26);
}

/* ==========================================
   مؤقت جاي بالغلط
========================================== */

.odd-one-out-timer-box {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin: 1px auto 10px;
}

.odd-one-out-timer-box.hidden {
    display: none !important;
}

.odd-one-out-timer-label {
    min-width: 225px;
    padding: 8px 17px;

    color: #ffffff;
    font-size: 18px;
    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #3189eb,
            #1655a7
        );

    border: 2px solid #83cdff;
    border-radius: 14px;

    box-shadow:
        0 5px 0 #09316d,
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.odd-one-out-timer-circle {
    position: relative;

    width: 84px;
    height: 84px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
}

.odd-one-out-timer-circle svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform: rotate(-90deg);
}

.odd-one-out-timer-track,
.odd-one-out-timer-progress {
    fill: none;
    stroke-width: 11;
}

.odd-one-out-timer-track {
    stroke: rgba(255, 255, 255, 0.22);
}

.odd-one-out-timer-progress {
    stroke: #ffcb38;
    stroke-linecap: round;

    stroke-dasharray: 326.73;
    stroke-dashoffset: 0;

    transition:
        stroke-dashoffset 1s linear,
        stroke 0.25s ease;
}

#odd-one-out-timer-text {
    position: relative;
    z-index: 2;

    color: #ffdc5c;
    font-size: 30px;
    font-weight: 900;
}

.odd-one-out-submit-answer {
    min-width: 225px;
    padding: 10px 17px;

    color: #082958;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #bce5ff
        );

    border: 2px solid #ffffff;
    border-radius: 14px;

    box-shadow:
        0 5px 0 #5c99c4,
        0 8px 16px rgba(0, 0, 0, 0.25);
}

.odd-one-out-timer-box.is-warning
.odd-one-out-timer-label {
    background:
        linear-gradient(
            180deg,
            #f05263,
            #b6152e
        );

    border-color: #ff9daa;
}

.odd-one-out-timer-box.is-warning
.odd-one-out-timer-progress {
    stroke: #ff405b;
}

.odd-one-out-timer-box.is-warning
#odd-one-out-timer-text {
    color: #ff657a;
}

.odd-one-out-timer-box.is-warning
.odd-one-out-timer-circle {
    animation:
        oddOneOutTimerPulse
        0.65s ease-in-out infinite;
}

@keyframes oddOneOutTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* ==========================================
   مساحة الكلمات
========================================== */

.odd-one-out-stage {
    position: relative;

    flex: 1;
    min-height: 250px;
    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #f9fcff,
            #dcecff
        );

    border: 3px solid #69beff;
    border-radius: 22px;

    box-shadow:
        inset 0 5px 18px rgba(5, 42, 95, 0.2),
        0 8px 18px rgba(0, 0, 0, 0.25);
}

/* الكلمة المتحركة */

.odd-one-out-bubble {
    position: absolute;
    top: 0;
    left: 0;

    min-width: 135px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 17px;
    box-sizing: border-box;

    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;

    user-select: none;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            #ff955a,
            #f45135
        );

    border: 3px solid #ffffff;
    border-radius: 30px;

    box-shadow:
        0 7px 0 #a92d1e,
        0 11px 18px rgba(0, 0, 0, 0.3),
        inset 0 3px 4px rgba(255, 255, 255, 0.4);

    will-change: transform;
}

/* تمييز الدخيل عند كشف الإجابة */

.odd-one-out-bubble.is-odd-answer {
    z-index: 10;

    background:
        linear-gradient(
            180deg,
            #ff5268,
            #bf1632
        );

    border-color: #ffe665;

    box-shadow:
        0 7px 0 #7e0a20,
        0 0 25px rgba(255, 50, 80, 0.85);

    animation:
        oddOneOutAnswerShake
        0.55s ease-in-out 2;
}

@keyframes oddOneOutAnswerShake {
    0%,
    100% {
        margin-left: 0;
    }

    25% {
        margin-left: -9px;
    }

    75% {
        margin-left: 9px;
    }
}

/* ==========================================
   الإجابة والأزرار
========================================== */

.odd-one-out-answer {
    margin: 12px auto 0;
    padding: 10px 22px;

    color: #ffffff;
    font-size: 21px;
    font-weight: 800;

    background: rgba(255, 255, 255, 0.13);

    border: 2px solid #ffcd3d;
    border-radius: 15px;
}

.odd-one-out-answer strong {
    color: #ffdc4e;
    font-size: 26px;
}

.odd-one-out-reason {
    margin-top: 4px;

    color: #ddecff;
    font-size: 17px;
    font-weight: 700;
}

.odd-one-out-answer.hidden,
.odd-one-out-result-buttons.hidden {
    display: none !important;
}

.odd-one-out-show-answer {
    min-width: 250px;
    margin: 12px auto 2px;
    padding: 12px 27px;

    color: #092657;
    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    background:
        linear-gradient(
            180deg,
            #ffe66b,
            #ffba21
        );

    border: 2px solid #fff1a8;
    border-radius: 16px;

    box-shadow:
        0 7px 0 #c37b08,
        0 11px 20px rgba(0, 0, 0, 0.3);
}

.odd-one-out-result-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;

    margin-top: 14px;
}

.odd-one-out-result-buttons button {
    min-width: 185px;
    padding: 12px 20px;

    color: #ffffff;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
}

.odd-one-out-first-team {
    background:
        linear-gradient(
            180deg,
            #3fa5ff,
            #1671d7
        );

    box-shadow: 0 6px 0 #0c4c99;
}

.odd-one-out-no-winner {
    background:
        linear-gradient(
            180deg,
            #ff6262,
            #d93242
        );

    box-shadow: 0 6px 0 #901d2a;
}

.odd-one-out-second-team {
    background:
        linear-gradient(
            180deg,
            #39d77a,
            #16a853
        );

    box-shadow: 0 6px 0 #087136;
}

@media (max-height: 720px) {
    .odd-one-out-card {
        height: 96vh;
        padding: 11px 17px;
    }

    .odd-one-out-title {
        font-size: 25px;
        margin-bottom: 5px;
    }

    .odd-one-out-instruction {
        padding: 8px 15px;
        margin-bottom: 7px;
        font-size: 20px;
    }

    .odd-one-out-timer-circle {
        width: 72px;
        height: 72px;
    }

    .odd-one-out-bubble {
        min-width: 120px;
        height: 52px;
        font-size: 18px;
    }
}
/* تخفيف الكلمات العادية عند كشف الدخيل */

.odd-one-out-bubble.is-not-odd {
    opacity: 0.58;
    filter: grayscale(0.35);

    transition:
        opacity 0.35s ease,
        filter 0.35s ease;
}

/* ==========================================
   فئة الأقرب يكسب: الشاشة الأساسية
========================================== */

.closest-wins-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    overflow-y: auto;

    direction: rtl;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(41, 142, 255, 0.22),
            transparent 38%
        ),
        rgba(1, 10, 30, 0.94);

    backdrop-filter: blur(12px);
}

.closest-wins-overlay.hidden {
    display: none !important;
}

.closest-wins-card {
    position: relative;

    width: min(1050px, 96vw);
    min-height: 620px;

    padding: 28px;

    border: 1px solid rgba(104, 191, 255, 0.5);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 42, 91, 0.98),
            rgba(3, 20, 55, 0.98)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(38, 147, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    overflow: hidden;

    animation: closestWinsCardEnter 0.45s ease both;
}

.closest-wins-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.035) 45%,
            transparent 70%
        );
}

/* رأس النافذة */

.closest-wins-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 22px;
}

.closest-wins-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 10px 20px;

    border: 1px solid rgba(255, 211, 80, 0.5);
    border-radius: 999px;

    color: #ffe891;
    font-size: 21px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            rgba(255, 196, 32, 0.16),
            rgba(255, 143, 0, 0.08)
        );

    box-shadow:
        0 0 18px rgba(255, 192, 32, 0.12);
}

/* المؤقت */

.closest-wins-timer {
    display: flex;
    align-items: center;

    gap: 12px;
    min-width: 175px;
    padding: 8px 10px 8px 18px;

    border: 1px solid rgba(103, 194, 255, 0.4);
    border-radius: 999px;

    color: #d8f1ff;

    background: rgba(5, 27, 64, 0.8);
}

.closest-wins-timer span {
    flex: 1;

    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.closest-wins-timer strong {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 2px solid #58bdff;
    border-radius: 50%;

    color: #ffffff;
    font-size: 21px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #158ee9,
            #1550c4
        );

    box-shadow:
        0 0 16px rgba(45, 169, 255, 0.42);

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.closest-wins-timer.warning strong {
    border-color: #ffca3a;
    color: #fff2b0;

    background:
        linear-gradient(
            145deg,
            #db8c08,
            #a74b00
        );

    animation: closestWinsTimerPulse 0.8s ease-in-out infinite;
}

.closest-wins-timer.danger strong {
    border-color: #ff5d6c;
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #e32d4e,
            #94142d
        );

    animation: closestWinsTimerPulse 0.48s ease-in-out infinite;
}

/* السؤال */

.closest-wins-question-section {
    position: relative;
    z-index: 2;

    margin-bottom: 28px;
    padding: 24px 26px;

    border: 1px solid rgba(106, 185, 255, 0.28);
    border-radius: 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(20, 78, 145, 0.42),
            rgba(7, 34, 78, 0.6)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.closest-wins-question-section h2 {
    margin: 0;

    color: #ffffff;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    line-height: 1.55;
}

.closest-wins-unit {
    display: inline-block;

    margin-top: 13px;
    padding: 5px 15px;

    border-radius: 999px;

    color: #9edcff;
    font-size: 15px;
    font-weight: 800;

    background: rgba(37, 145, 219, 0.15);
}

/* منطقتا الفريقين */

.closest-wins-guess-stage {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.closest-wins-team-panel {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 275px;
    padding: 24px;

    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;

    background:
        linear-gradient(
            155deg,
            rgba(14, 55, 108, 0.74),
            rgba(5, 27, 64, 0.88)
        );

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.closest-wins-team-panel.first-team.active {
    border-color: #339cff;

    box-shadow:
        0 0 25px rgba(38, 151, 255, 0.25),
        inset 0 0 24px rgba(38, 151, 255, 0.06);
}

.closest-wins-team-panel.second-team.active {
    border-color: #33d891;

    box-shadow:
        0 0 25px rgba(42, 213, 140, 0.23),
        inset 0 0 24px rgba(42, 213, 140, 0.06);
}

.closest-wins-team-panel.waiting {
    opacity: 0.48;
    filter: grayscale(0.5);
}

.closest-wins-team-panel.locked {
    opacity: 0.82;
}

.closest-wins-team-role {
    display: inline-block;

    margin-bottom: 9px;
    padding: 5px 13px;

    border-radius: 999px;

    color: #b9ddf7;
    font-size: 13px;
    font-weight: 800;

    background: rgba(255, 255, 255, 0.07);
}

.closest-wins-team-panel h3 {
    min-height: 38px;
    margin: 0 0 18px;

    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    text-align: center;
}

/* خانة التخمين */

.closest-wins-input {
    width: 100%;
    height: 66px;

    padding: 8px 16px;

    border: 2px solid rgba(116, 194, 255, 0.35);
    border-radius: 16px;
    outline: none;

    direction: ltr;

    color: #ffffff;
    font-family: inherit;
    font-size: 29px;
    font-weight: 900;
    text-align: center;

    background: rgba(1, 17, 43, 0.72);

    box-shadow:
        inset 0 3px 12px rgba(0, 0, 0, 0.25);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.closest-wins-input::placeholder {
    direction: rtl;

    color: rgba(203, 228, 247, 0.46);
    font-size: 17px;
    font-weight: 700;
}

.closest-wins-input:focus {
    border-color: #63c4ff;

    background: rgba(2, 24, 60, 0.94);

    box-shadow:
        0 0 0 4px rgba(67, 174, 255, 0.12),
        0 0 18px rgba(58, 168, 255, 0.2);
}

.second-team .closest-wins-input:focus {
    border-color: #43dc9b;

    box-shadow:
        0 0 0 4px rgba(52, 215, 150, 0.11),
        0 0 18px rgba(52, 215, 150, 0.18);
}

.closest-wins-input:disabled {
    cursor: not-allowed;
}

.closest-wins-input.locked {
    border-color: rgba(118, 205, 255, 0.45);
    color: #bfe8ff;

    background: rgba(5, 35, 75, 0.72);

    cursor: default;
}

/* زر تثبيت التخمين */

.closest-wins-lock-button {
    width: 100%;
    min-height: 50px;

    margin-top: 17px;
    padding: 10px 16px;

    border: 0;
    border-radius: 14px;

    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #168fe9,
            #2357cf
        );

    box-shadow:
        0 7px 18px rgba(16, 92, 204, 0.28);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.second-team .closest-wins-lock-button {
    background:
        linear-gradient(
            135deg,
            #19b879,
            #087e5a
        );

    box-shadow:
        0 7px 18px rgba(14, 151, 97, 0.24);
}

.closest-wins-lock-button:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.closest-wins-lock-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
}

.closest-wins-lock-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

/* رسالة الإدخال الخاطئ */

.closest-wins-error {
    position: relative;
    z-index: 3;

    margin: 16px auto 0;
    padding: 10px 16px;

    border: 1px solid rgba(255, 91, 111, 0.48);
    border-radius: 12px;

    color: #ffd8de;
    font-size: 15px;
    font-weight: 800;
    text-align: center;

    background: rgba(159, 20, 47, 0.28);

    animation: closestWinsErrorShake 0.3s ease;
}

.closest-wins-error.hidden {
    display: none !important;
}

/* الحركات */

@keyframes closestWinsCardEnter {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes closestWinsTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes closestWinsErrorShake {
    0%,
    100% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(7px);
    }

    70% {
        transform: translateX(-7px);
    }
}

/* الشاشات الصغيرة */

@media (max-width: 760px) {
    .closest-wins-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .closest-wins-card {
        width: 100%;
        min-height: auto;
        padding: 18px;
        border-radius: 20px;
    }

    .closest-wins-header {
        align-items: stretch;
        flex-direction: column;
    }

    .closest-wins-category {
        align-self: center;
    }

    .closest-wins-timer {
        align-self: center;
    }

    .closest-wins-guess-stage {
        grid-template-columns: 1fr;
    }

    .closest-wins-team-panel {
        min-height: 250px;
    }
}
/* ==========================================
   فئة الأقرب يكسب: صفحة النتيجة
========================================== */

.closest-wins-result {
    position: relative;
    z-index: 2;

    animation: closestWinsResultEnter 0.55s ease both;
}

.closest-wins-result.hidden,
.closest-wins-guess-stage.hidden,
.closest-wins-timer.hidden,
.closest-wins-tie-message.hidden,
.closest-wins-exact-hit.hidden {
    display: none !important;
}

/* رسالة الفائز */

.closest-wins-result-message {
    min-height: 66px;
    margin-bottom: 18px;
    padding: 13px 20px;

    border: 1px solid rgba(255, 216, 89, 0.42);
    border-radius: 18px;

    color: #fff0a8;
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.45;
    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(255, 193, 36, 0.16),
            rgba(255, 135, 0, 0.08)
        );

    box-shadow:
        0 0 24px rgba(255, 190, 35, 0.12);
}

/* رسالة التعادل وأفضلية صاحب الدور */

.closest-wins-tie-message {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
    margin: -5px auto 19px;
}

.closest-wins-tie-message strong {
    padding: 8px 16px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;

    color: #ffffff;
    font-size: 16px;

    background: rgba(255, 255, 255, 0.08);
}

.closest-wins-tie-message span {
    padding: 8px 16px;

    border: 1px solid rgba(255, 206, 56, 0.48);
    border-radius: 999px;

    color: #ffe581;
    font-size: 16px;
    font-weight: 900;

    background: rgba(255, 190, 28, 0.13);

    box-shadow:
        0 0 15px rgba(255, 193, 31, 0.13);

    animation: closestWinsAdvantageBadge 0.55s ease 0.3s both;
}

/* حاوية المسطرة */

.closest-wins-ruler-wrap {
    margin: 0 auto;
    padding:
        95px
        55px
        90px;

    border: 1px solid rgba(101, 183, 255, 0.22);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 31, 72, 0.76),
            rgba(2, 18, 49, 0.88)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.closest-wins-ruler {
    position: relative;

    width: 100%;
    height: 34px;

    border-radius: 8px;

    background:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(5% - 1px),
            rgba(171, 218, 255, 0.45) calc(5% - 1px),
            rgba(171, 218, 255, 0.45) 5%
        );

    animation: closestWinsRulerReveal 0.75s ease both;
}

.closest-wins-ruler-line {
    position: absolute;
    right: 0;
    left: 0;
    top: 15px;

    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            to left,
            #2e91e7,
            #b6dcfa,
            #2e91e7
        );

    box-shadow:
        0 0 12px rgba(95, 183, 255, 0.48);
}

/* علامات التخمين والإجابة */

.closest-wins-marker {
    --marker-position: 50%;
    --marker-color: #ffffff;

    position: absolute;
    left: var(--marker-position);
    top: 17px;

    display: flex;
    align-items: center;
    flex-direction: column;

    width: 0;

    color: var(--marker-color);

    transform: translateX(-50%);

    transition:
        left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.4s ease,
        filter 0.4s ease;
}

.closest-wins-marker i {
    position: absolute;
    top: -13px;

    display: block;

    width: 19px;
    height: 19px;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: var(--marker-color);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.08),
        0 0 18px var(--marker-color);

    transform: scale(0);

    animation:
        closestWinsMarkerPop
        0.42s
        cubic-bezier(0.2, 1.6, 0.4, 1)
        forwards;
}

.closest-wins-marker-value {
    position: absolute;
    bottom: 35px;

    min-width: max-content;
    padding: 7px 12px;

    border: 1px solid currentColor;
    border-radius: 10px;

    color: #ffffff;
    font-size: 17px;
    font-weight: 900;

    background: rgba(1, 17, 43, 0.96);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.3);
}

.closest-wins-marker-value::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 100%;

    border: 6px solid transparent;
    border-top-color: currentColor;

    transform: translateX(-50%);
}

.closest-wins-marker small {
    position: absolute;
    top: 31px;

    min-width: max-content;

    color: #cbe5f7;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.closest-wins-marker.first-marker {
    --marker-color: #299cff;
}

.closest-wins-marker.second-marker {
    --marker-color: #2dd88c;
}

.closest-wins-marker.answer-marker {
    --marker-color: #ffc928;

    z-index: 5;
}

.closest-wins-marker.answer-marker i {
    width: 25px;
    height: 25px;
    top: -16px;

    border-color: #fff5bd;

    box-shadow:
        0 0 0 5px rgba(255, 202, 40, 0.14),
        0 0 25px rgba(255, 202, 40, 0.9);
}

.closest-wins-marker.answer-marker small {
    color: #ffe685;
}

/* حالة الفريق الفائز والخاسر */

.closest-wins-marker.winner {
    z-index: 6;
}

.closest-wins-marker.winner i {
    animation:
        closestWinsMarkerPop
        0.42s
        cubic-bezier(0.2, 1.6, 0.4, 1)
        forwards,
        closestWinsWinnerGlow
        1.15s
        ease-in-out
        0.45s
        infinite;
}

.closest-wins-marker.winner .closest-wins-marker-value {
    border-width: 2px;

    transform: scale(1.13);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.36),
        0 0 20px var(--marker-color);
}

.closest-wins-marker.loser {
    z-index: 1;

    opacity: 0.4;
    filter: grayscale(0.65);
}

/* فروق الفريقين */

.closest-wins-differences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
    margin-top: 18px;
}

.closest-wins-difference {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 15px 18px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;

    color: #d9efff;

    background: rgba(5, 31, 70, 0.72);
}

.closest-wins-difference span {
    font-size: 14px;
    font-weight: 800;
}

.closest-wins-difference strong {
    direction: ltr;

    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
}

.closest-wins-difference.first-difference {
    border-color: rgba(41, 156, 255, 0.4);
}

.closest-wins-difference.second-difference {
    border-color: rgba(45, 216, 140, 0.4);
}

/* إصابة دقيقة */

.closest-wins-exact-hit {
    width: fit-content;

    margin: 18px auto 0;
    padding: 11px 24px;

    border: 2px solid #ffdd62;
    border-radius: 999px;

    color: #fff4b3;
    font-size: 24px;
    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            rgba(255, 197, 31, 0.25),
            rgba(255, 119, 0, 0.2)
        );

    box-shadow:
        0 0 28px rgba(255, 197, 31, 0.42);

    animation:
        closestWinsExactHit
        0.65s
        cubic-bezier(0.2, 1.55, 0.4, 1)
        both;
}

/* حركات النتيجة */

@keyframes closestWinsResultEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes closestWinsRulerReveal {
    from {
        opacity: 0;
        transform: scaleX(0.15);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes closestWinsMarkerPop {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes closestWinsWinnerGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(255, 255, 255, 0.08),
            0 0 16px var(--marker-color);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(255, 255, 255, 0.04),
            0 0 34px var(--marker-color);
    }
}

@keyframes closestWinsAdvantageBadge {
    from {
        opacity: 0;
        transform: scale(0.65) rotate(-5deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes closestWinsExactHit {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* النتيجة على الشاشات الصغيرة */

@media (max-width: 760px) {
    .closest-wins-ruler-wrap {
        padding:
            95px
            28px
            90px;
    }

    .closest-wins-marker-value {
        padding: 6px 8px;
        font-size: 14px;
    }

    .closest-wins-marker small {
        font-size: 10px;
    }

    .closest-wins-differences {
        grid-template-columns: 1fr;
    }
}
/* زر متابعة لعبة الأقرب يكسب */

.closest-wins-continue {
    display: block;

    min-width: 230px;
    min-height: 54px;

    margin: 22px auto 0;
    padding: 11px 26px;

    border: 2px solid #ffe17a;
    border-radius: 15px;

    color: #503000;
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;

    background:
        linear-gradient(
            180deg,
            #ffde67,
            #efa20b
        );

    box-shadow:
        0 8px 22px rgba(237, 159, 8, 0.28),
        0 0 18px rgba(255, 211, 66, 0.16);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.closest-wins-continue:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);

    box-shadow:
        0 11px 26px rgba(237, 159, 8, 0.35),
        0 0 24px rgba(255, 211, 66, 0.24);
}

.closest-wins-continue:active {
    transform: translateY(1px) scale(0.99);
}

.closest-wins-continue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* ==========================================
   الأقرب يكسب: إلغاء السكرول وملاءمة الشاشة
========================================== */

.closest-wins-overlay {
    padding: 12px !important;
    overflow: hidden !important;
}

.closest-wins-card {
    box-sizing: border-box;

    width: min(1050px, 98vw) !important;
    height: min(680px, calc(100vh - 24px)) !important;
    min-height: 0 !important;

    padding: clamp(16px, 2.5vh, 26px) !important;
    overflow: hidden !important;
}

/* عند ظهور النتيجة نخفي صندوق السؤال الكبير */
.closest-wins-overlay.showing-result
.closest-wins-question-section {
    display: none !important;
}

.closest-wins-overlay.showing-result
.closest-wins-header {
    margin-bottom: 14px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-result-message {
    min-height: 54px !important;
    margin-bottom: 12px !important;
    padding: 9px 16px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-ruler-wrap {
    padding:
        clamp(62px, 10vh, 78px)
        45px
        clamp(58px, 9vh, 72px) !important;
}

.closest-wins-overlay.showing-result
.closest-wins-differences {
    margin-top: 12px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-difference {
    padding: 10px 15px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-continue {
    min-height: 47px !important;
    margin-top: 13px !important;
}

/* ضبط إضافي للشاشات القصيرة */

@media (max-height: 700px) {
    .closest-wins-card {
        height: calc(100vh - 16px) !important;
        padding: 14px 20px !important;
    }

    .closest-wins-header {
        margin-bottom: 12px !important;
    }

    .closest-wins-category {
        min-height: 40px !important;
        padding: 7px 16px !important;
        font-size: 18px !important;
    }

    .closest-wins-timer strong {
        width: 42px !important;
        height: 42px !important;
    }

    .closest-wins-question-section {
        margin-bottom: 15px !important;
        padding: 14px 20px !important;
    }

    .closest-wins-question-section h2 {
        font-size: 25px !important;
    }

    .closest-wins-team-panel {
        min-height: 235px !important;
        padding: 17px !important;
    }

    .closest-wins-overlay.showing-result
    .closest-wins-ruler-wrap {
        padding:
            60px
            40px
            58px !important;
    }
}
/* ==========================================
   الأقرب يكسب: الهوية البصرية النهائية
========================================== */

.closest-wins-overlay {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(28, 145, 255, 0.3),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(31, 220, 142, 0.2),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #020b21,
            #061b3f 50%,
            #020b21
        ) !important;
}

/* خلفية البطاقة */

.closest-wins-card {
    border:
        1px solid
        rgba(133, 205, 255, 0.46) !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 35, 80, 0.96),
            rgba(3, 18, 48, 0.98)
        ) !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.56),
        0 0 45px rgba(32, 144, 255, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* دوائر هدف زخرفية */

.closest-wins-card::after {
    content: "";

    position: absolute;
    left: -105px;
    bottom: -120px;

    width: 330px;
    height: 330px;

    border:
        2px solid
        rgba(82, 174, 255, 0.09);
    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            transparent 0 18%,
            rgba(63, 165, 255, 0.07) 19% 20%,
            transparent 21% 38%,
            rgba(63, 165, 255, 0.06) 39% 40%,
            transparent 41% 58%,
            rgba(63, 165, 255, 0.05) 59% 60%,
            transparent 61%
        );
}

/* الشريط العلوي */

.closest-wins-header {
    padding: 8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(26, 122, 220, 0.15),
            rgba(255, 255, 255, 0.025),
            rgba(25, 196, 126, 0.12)
        );
}

.closest-wins-category {
    border-color:
        rgba(255, 216, 80, 0.68) !important;

    color: #fff0a5 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 203, 45, 0.25),
            rgba(255, 136, 0, 0.12)
        ) !important;

    box-shadow:
        0 0 20px rgba(255, 195, 31, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
}

/* بطاقة السؤال */

.closest-wins-question-section {
    border:
        1px solid
        rgba(121, 202, 255, 0.5) !important;

    background:
        linear-gradient(
            120deg,
            rgba(22, 100, 188, 0.34),
            rgba(11, 48, 102, 0.58),
            rgba(18, 91, 163, 0.27)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 28px rgba(0, 0, 0, 0.18) !important;
}


/* منطقة المواجهة */

.closest-wins-guess-stage {
    position: relative;

    gap: 38px !important;
}

/* دائرة VS بين الفريقين */

.closest-wins-guess-stage::after {
    content: "VS";

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border:
        3px solid
        rgba(255, 230, 130, 0.9);
    border-radius: 50%;

    color: #5a3500;
    font-size: 16px;
    font-weight: 1000;

    background:
        linear-gradient(
            145deg,
            #ffe47c,
            #eea313
        );

    box-shadow:
        0 0 0 7px rgba(5, 25, 61, 0.95),
        0 0 25px rgba(255, 193, 34, 0.38);

    transform: translate(-50%, -50%);
}

/* بطاقة صاحب الدور: أزرق */

.closest-wins-team-panel.first-team {
    border-color:
        rgba(50, 159, 255, 0.48) !important;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(54, 166, 255, 0.23),
            transparent 46%
        ),
        linear-gradient(
            155deg,
            rgba(14, 72, 139, 0.86),
            rgba(5, 30, 70, 0.95)
        ) !important;
}

.closest-wins-team-panel.first-team::before {
    content: "";

    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;

    height: 4px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #3ea9ff,
            transparent
        );

    box-shadow:
        0 0 15px #269cff;
}

/* بطاقة المنافس: أخضر */

.closest-wins-team-panel.second-team {
    border-color:
        rgba(42, 218, 142, 0.44) !important;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(44, 220, 143, 0.19),
            transparent 46%
        ),
        linear-gradient(
            155deg,
            rgba(9, 99, 73, 0.75),
            rgba(4, 42, 50, 0.96)
        ) !important;
}

.closest-wins-team-panel.second-team::before {
    content: "";

    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;

    height: 4px;

    border-radius: 0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #35de96,
            transparent
        );

    box-shadow:
        0 0 15px #26cd86;
}

.closest-wins-team-panel h3 {
    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.12);

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.36);
}

/* خانة الرقم بشكل شاشة رقمية */

.closest-wins-input {
    border-color:
        rgba(159, 219, 255, 0.55) !important;

    background:
        linear-gradient(
            180deg,
            rgba(1, 13, 34, 0.96),
            rgba(3, 29, 66, 0.92)
        ) !important;

    box-shadow:
        inset 0 4px 14px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* تحسين النتيجة */

.closest-wins-overlay.showing-result
.closest-wins-card {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 193, 35, 0.08),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(8, 36, 81, 0.98),
            rgba(3, 18, 48, 0.99)
        ) !important;
}

.closest-wins-result-message {
    position: relative;

    overflow: hidden;

    text-shadow:
        0 3px 16px
        rgba(255, 193, 35, 0.25);
}

.closest-wins-result-message::before,
.closest-wins-result-message::after {
    content: "✦";

    position: absolute;
    top: 50%;

    color: #ffd968;
    font-size: 25px;

    transform: translateY(-50%);
}

.closest-wins-result-message::before {
    right: 24px;
}

.closest-wins-result-message::after {
    left: 24px;
}

/* المسطرة تصبح مضيئة وواضحة */

.closest-wins-ruler-wrap {
    border-color:
        rgba(119, 202, 255, 0.4) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 46, 96, 0.84),
            rgba(2, 17, 44, 0.94)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -20px 45px rgba(0, 0, 0, 0.18),
        0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.closest-wins-difference {
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}

/* الهاتف والشاشات الضيقة */

@media (max-width: 760px) {
    .closest-wins-guess-stage {
        gap: 14px !important;
    }

    .closest-wins-guess-stage::after {
        display: none;
    }
}
/* ==========================================
   حركة مقارنة الأقرب يكسب
========================================== */

.closest-wins-marker {
    transition:
        left 2.8s
        cubic-bezier(0.18, 0.82, 0.25, 1),
        opacity 0.45s ease,
        filter 0.45s ease,
        transform 0.45s ease !important;
}

.closest-wins-marker.travelling i {
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.08),
        0 0 25px var(--marker-color),
        0 0 45px var(--marker-color) !important;
}

.closest-wins-marker.travelling
.closest-wins-marker-value {
    animation:
        closestWinsValueFloating
        0.65s
        ease-in-out
        infinite alternate;
}

/* وميض متحرك داخل المسطرة أثناء المقارنة */

.closest-wins-result:not(.comparison-complete)
.closest-wins-ruler-line::after {
    content: "";

    position: absolute;
    top: -3px;

    width: 90px;
    height: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent
        );

    filter: blur(1px);

    animation:
        closestWinsRulerScan
        1.05s
        linear
        infinite;
}

/* الفروق وزر المتابعة يظهران بعد انتهاء القياس */

.closest-wins-result:not(.comparison-complete)
.closest-wins-differences,
.closest-wins-result:not(.comparison-complete)
.closest-wins-continue {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.closest-wins-result.comparison-complete
.closest-wins-differences,
.closest-wins-result.comparison-complete
.closest-wins-continue {
    opacity: 1;
    visibility: visible;

    animation:
        closestWinsDetailsAppear
        0.45s
        ease
        both;
}

/* حركة أقوى للفائز */

.closest-wins-marker.winner {
    transform:
        translateX(-50%)
        scale(1.12) !important;
}

.closest-wins-marker.loser {
    transform:
        translateX(-50%)
        scale(0.88) !important;
}

@keyframes closestWinsRulerScan {
    from {
        left: -90px;
    }

    to {
        left: 100%;
    }
}

@keyframes closestWinsValueFloating {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

@keyframes closestWinsDetailsAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================
   إصلاح توزيع صفحة نتيجة الأقرب يكسب
========================================== */

.closest-wins-overlay.showing-result
.closest-wins-result {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 17px;
    min-height: calc(100% - 72px);
    padding: 6px 0 18px;
}

.closest-wins-overlay.showing-result
.closest-wins-result-message {
    margin: 0 !important;
}

/* بطاقة الإجابة الصحيحة */

.closest-wins-correct-answer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;
    width: fit-content;

    margin: 0 auto;
    padding: 9px 22px;

    border: 1px solid rgba(255, 211, 65, 0.6);
    border-radius: 999px;

    color: #ffe88a;

    background:
        linear-gradient(
            135deg,
            rgba(255, 199, 35, 0.2),
            rgba(255, 139, 0, 0.1)
        );

    box-shadow:
        0 0 20px rgba(255, 196, 28, 0.16);
}

.closest-wins-correct-answer span {
    font-size: 14px;
    font-weight: 800;
}

.closest-wins-correct-answer strong {
    direction: ltr;

    color: #ffffff;
    font-size: 23px;
    font-weight: 1000;
}

/* إنزال المسطرة وإعطاؤها مساحة كافية */

.closest-wins-overlay.showing-result
.closest-wins-ruler-wrap {
    width: 100%;
    box-sizing: border-box;

    margin: 5px 0 0 !important;
    padding:
        82px
        45px
        105px !important;
}

/*
   اسم الإجابة يبقى قريبًا من العلامة الذهبية،
   وأسماء الفرق تنزل أكثر حتى لا تتداخل معه.
*/

.closest-wins-marker.answer-marker small {
    top: 31px !important;

    color: #ffe477 !important;
    font-weight: 900 !important;
}

.closest-wins-marker.first-marker small,
.closest-wins-marker.second-marker small {
    top: 58px !important;

    padding: 4px 10px;

    border-radius: 999px;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 900 !important;

    background: rgba(2, 18, 46, 0.92);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.24);
}

.closest-wins-overlay.showing-result
.closest-wins-differences {
    margin: 0 !important;
}

.closest-wins-overlay.showing-result
.closest-wins-continue {
    margin: 0 auto !important;
}
/* ==========================================
   الأقرب يكسب: احتواء صفحة النتيجة كاملة
========================================== */

/* إخفاء شريط شعار الأقرب يكسب في النتيجة */
.closest-wins-overlay.showing-result
.closest-wins-header {
    display: none !important;
}

/* استغلال كامل ارتفاع البطاقة */
.closest-wins-overlay.showing-result
.closest-wins-card {
    height: calc(100vh - 16px) !important;
    padding: 12px 20px !important;
}

/* توزيع جميع عناصر النتيجة داخل الشاشة */
.closest-wins-overlay.showing-result
.closest-wins-result {
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column;
    justify-content: space-between;

    gap: 9px !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;

    padding: 0 !important;
}

/* تصغير رسالة الفوز قليلًا */
.closest-wins-overlay.showing-result
.closest-wins-result-message {
    min-height: 48px !important;

    margin: 0 !important;
    padding: 7px 16px !important;

    font-size: clamp(
        23px,
        2.5vw,
        31px
    ) !important;
}

/* شارة التعادل */
.closest-wins-overlay.showing-result
.closest-wins-tie-message {
    margin: 0 !important;
}

/* صندوق الإجابة الصحيحة */
.closest-wins-overlay.showing-result
.closest-wins-correct-answer {
    margin: 0 auto !important;
    padding: 7px 19px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-correct-answer strong {
    font-size: 20px !important;
}

/* تصغير مساحة المسطرة مع إبقائها واضحة */
.closest-wins-overlay.showing-result
.closest-wins-ruler-wrap {
    flex: 0 0 auto;

    width: 100% !important;

    margin: 0 !important;
    padding:
        66px
        45px
        82px !important;
}

/* فصل أسماء الفرق عن الإجابة */
.closest-wins-marker.answer-marker small {
    top: 29px !important;
}

.closest-wins-marker.first-marker small,
.closest-wins-marker.second-marker small {
    top: 53px !important;
}

/* صندوقا الفروق */
.closest-wins-overlay.showing-result
.closest-wins-differences {
    flex: 0 0 auto;

    gap: 12px !important;
    margin: 0 !important;
}

.closest-wins-overlay.showing-result
.closest-wins-difference {
    min-height: 45px;
    padding: 8px 14px !important;
}

/* الإصابة الدقيقة */
.closest-wins-overlay.showing-result
.closest-wins-exact-hit {
    margin: 0 auto !important;
    padding: 7px 19px !important;
    font-size: 20px !important;
}

/* زر متابعة اللعبة يبقى ظاهرًا دائمًا */
.closest-wins-overlay.showing-result
.closest-wins-continue {
    flex: 0 0 auto;

    min-width: 210px !important;
    min-height: 44px !important;

    margin: 0 auto !important;
    padding: 7px 22px !important;
}

/* ضبط خاص للشاشات القصيرة */
@media (max-height: 700px) {
    .closest-wins-overlay.showing-result
    .closest-wins-result {
        gap: 6px !important;
    }

    .closest-wins-overlay.showing-result
    .closest-wins-ruler-wrap {
        padding:
            58px
            40px
            72px !important;
    }

    .closest-wins-overlay.showing-result
    .closest-wins-result-message {
        font-size: 24px !important;
    }

    .closest-wins-overlay.showing-result
    .closest-wins-correct-answer {
        padding: 5px 16px !important;
    }
}
/* ==========================================
   نبض الفائز وكونفيتي الأقرب يكسب
========================================== */

.closest-wins-marker.winner i {
    position: relative;

    animation:
        closestWinsWinnerArrival
        0.72s
        ease-in-out
        3 !important;
}

.closest-wins-marker.winner i::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 20px;
    height: 20px;

    border: 3px solid var(--marker-color);
    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(1);

    animation:
        closestWinsArrivalRing
        1.05s
        ease-out
        3;
}

/* طبقة الكونفيتي */

.closest-wins-confetti-layer {
    position: absolute;
    inset: 0;
    z-index: 100;

    overflow: hidden;
    pointer-events: none;
}

.closest-wins-confetti-layer span {
    position: absolute;
    left: var(--confetti-left);
    top: -25px;

    border-radius: 2px;

    opacity: 0;

    animation:
        closestWinsConfettiFall
        var(--confetti-duration)
        linear
        var(--confetti-delay)
        forwards;
}

@keyframes closestWinsWinnerArrival {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.75);
        opacity: 0.68;

        box-shadow:
            0 0 15px var(--marker-color),
            0 0 38px var(--marker-color),
            0 0 65px var(--marker-color);
    }
}

@keyframes closestWinsArrivalRing {
    from {
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(0.65);
    }

    to {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(3.5);
    }
}

@keyframes closestWinsConfettiFall {
    0% {
        opacity: 0;

        transform:
            translate3d(0, -20px, 0)
            rotate(0);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0.9;

        transform:
            translate3d(
                var(--confetti-drift),
                105vh,
                0
            )
            rotate(
                var(--confetti-rotation)
            );
    }
}

/* النتيجة القابلة للتعديل يدويًا */
.editable-score {
    cursor: text;
    min-width: 70px;
    padding: 3px 10px;
    margin: 2px auto;
    border: 1px solid transparent;
    border-radius: 10px;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.editable-score:hover {
    border-color: rgba(91, 194, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.editable-score:focus {
    outline: none;
    border-color: #5bc2ff;
    background: rgba(91, 194, 255, 0.12);
    box-shadow: 0 0 10px rgba(91, 194, 255, 0.35);
}
/* إخفاء مكان السؤال القديم وتوفير المساحة */
#question-text.top-question-box {
    display: none !important;
}
/* ==========================================
   إبراز الفريق صاحب الدور
========================================== */

.center-status {
    width: 260px;
    top: 5px;
    gap: 5px;
}

#turn-display.turn-display {
    width: 100%;
    padding: 6px 12px 9px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    border: 2px solid rgba(255, 211, 79, 0.85);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 80, 168, 0.97),
            rgba(6, 37, 100, 0.98)
        );

    box-shadow:
        0 5px 0 rgba(4, 26, 75, 0.9),
        0 0 18px rgba(255, 205, 65, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.18);

    line-height: 1.15;
}

.turn-round-label {
    color: #d9edff;
    font-size: 13px;
    font-weight: 700;
}

.turn-now-label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.active-turn-team-name {
    display: block;
    max-width: 230px;

    color: #ffe169;
    font-size: 22px;
    font-weight: 900;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(255, 213, 70, 0.75);

    animation:
        activeTeamGlow 1.6s ease-in-out infinite;
}

@keyframes activeTeamGlow {
    0%,
    100% {
        color: #ffe169;
        text-shadow:
            0 2px 2px rgba(0, 0, 0, 0.55),
            0 0 7px rgba(255, 213, 70, 0.55);
    }

    50% {
        color: #ffffff;
        text-shadow:
            0 2px 2px rgba(0, 0, 0, 0.55),
            0 0 15px rgba(255, 220, 90, 1);
    }
}

/* مكان مستقل لمساعدة أول حرف */
#first-letter-display.first-letter-help-box {
    min-height: 27px;
    height: auto;
    padding: 3px 12px !important;
    margin-top: 5px !important;

    color: #ffe169;
    font-size: 18px;
    font-weight: 900;

    border: 1px solid rgba(255, 225, 105, 0.65);
    border-radius: 10px;

    background: rgba(255, 193, 45, 0.13);

    text-shadow:
        0 0 8px rgba(255, 211, 70, 0.75);
}
/* مكان ظهور مساعدة أول حرف تحت زر التخمين */
#btn-guess-trigger + #first-letter-display {
    transform: translate(-70px, 50px) !important;
    position: static !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 48px;
    height: auto;

    box-sizing: border-box;
    margin: 10px 0 4px !important;
    padding: 9px 12px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffe169;
    font-size: 30px !important;
    font-weight: 900;
    text-align: center;

    border: 2px solid rgba(255, 213, 74, 0.8);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(61, 104, 179, 0.55),
            rgba(14, 49, 112, 0.78)
        );

    box-shadow:
        0 0 13px rgba(255, 209, 65, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.12);

    text-shadow:
        0 0 9px rgba(255, 213, 74, 0.75);
}

#btn-guess-trigger + #first-letter-display.hidden {
    display: none !important;
}
#first-letter-display {
    position: relative !important;

    /* يمين ويسار */
    left: 490px !important;

    /* فوق وتحت */
    top:170px !important;

    transform: none !important;
}
/* وميض وتوهج مساعدة أول حرف */
#first-letter-display:not(.hidden) {
    animation:
        firstLetterGlow 1.1s ease-in-out infinite !important;
}

@keyframes firstLetterGlow {
    0%,
    100% {
        opacity: 1;

        color: #fff3a0;

        text-shadow:
            0 0 6px #ffd54f,
            0 0 12px rgba(255, 213, 79, 0.75);

        filter: brightness(1.1);
    }

    50% {
        opacity: 0.55;

        color: #ffbd2e;

        text-shadow:
            0 0 2px rgba(255, 189, 46, 0.35);

        filter: brightness(0.75);
    }
}
#puzzgo-message-box {
    position: relative !important;

    /* يمين ويسار */
    left: -150px !important;

    /* فوق وتحت */
    top: 0px !important;
}
/* الكلمة الأولى — برتقالي */
.moving-letter-ball.moving-letter-word-1 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #ff9b62,
            #ff633d 55%,
            #d93720
        ) !important;

    box-shadow:
        0 7px 0 #a82518,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الثانية — أزرق */
.moving-letter-ball.moving-letter-word-2 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #70d4ff,
            #258ee8 55%,
            #1253a5
        ) !important;

    box-shadow:
        0 7px 0 #0b3f85,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الثالثة — أخضر */
.moving-letter-ball.moving-letter-word-3 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #77efa5,
            #25bd64 55%,
            #08783a
        ) !important;

    box-shadow:
        0 7px 0 #075b2e,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الرابعة — بنفسجي */
.moving-letter-ball.moving-letter-word-4 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #d89cff,
            #9854dc 55%,
            #5d289e
        ) !important;

    box-shadow:
        0 7px 0 #421b78,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}/* الكلمة الأولى — برتقالي */
.moving-letter-ball.moving-letter-word-1 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #ff9b62,
            #ff633d 55%,
            #d93720
        ) !important;

    box-shadow:
        0 7px 0 #a82518,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الثانية — أزرق */
.moving-letter-ball.moving-letter-word-2 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #70d4ff,
            #258ee8 55%,
            #1253a5
        ) !important;

    box-shadow:
        0 7px 0 #0b3f85,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الثالثة — أخضر */
.moving-letter-ball.moving-letter-word-3 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #77efa5,
            #25bd64 55%,
            #08783a
        ) !important;

    box-shadow:
        0 7px 0 #075b2e,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}

/* الكلمة الرابعة — بنفسجي */
.moving-letter-ball.moving-letter-word-4 {
    background:
        radial-gradient(
            circle at 34% 25%,
            #d89cff,
            #9854dc 55%,
            #5d289e
        ) !important;

    box-shadow:
        0 7px 0 #421b78,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.45) !important;
}
/* التحكم بحجم QR في فئة بدون كلام */
:root {
    --charades-qr-size: 80px;
}

#charades-qr {
    width: calc(
        var(--charades-qr-size) + 40px
    ) !important;

    height: calc(
        var(--charades-qr-size) + 40px
    ) !important;

    min-width: 0 !important;
    min-height: 0 !important;
}

#charades-qr canvas,
#charades-qr img {
    width:
        var(--charades-qr-size) !important;

    height:
        var(--charades-qr-size) !important;

    min-width: 0 !important;
    min-height: 0 !important;
}
/* ==================================================
   اختيار نمط اللعب
   مستقل تمامًا عن نظام البازل
   ================================================== */

#setup-screen #pg-game-mode-section {
    width: 100%;
}

#setup-screen .pg-game-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 8px 0 14px;
}

#setup-screen .pg-game-mode-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 12px 16px;

    border: 2px solid rgba(255, 255, 255, 0.20);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 64, 145, 0.72),
            rgba(25, 39, 105, 0.82)
        );

    color: #ffffff;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#setup-screen .pg-game-mode-card:hover {
    transform: translateY(-2px);
    border-color: #76d5ff;
}

#setup-screen .pg-game-mode-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#setup-screen .pg-game-mode-card:has(input:checked) {
    border-color: #ffd85a;

    box-shadow:
        0 0 0 3px rgba(255, 216, 90, 0.16),
        0 10px 24px rgba(0, 0, 0, 0.22);
}

#setup-screen .pg-game-mode-icon {
    font-size: 2rem;
}

#setup-screen .pg-game-mode-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

#setup-screen .pg-game-mode-text strong {
    font-size: 1.05rem;
}

#setup-screen .pg-game-mode-text small {
    color: #d7e9ff;
    font-size: 0.78rem;
}

#setup-screen .pg-game-mode-check {
    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;
    margin-inline-start: auto;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    color: transparent;
}

#setup-screen
.pg-game-mode-card:has(input:checked)
.pg-game-mode-check {
    color: #142864;
    background: #ffd85a;
    border-color: #ffd85a;
}

@media (max-width: 700px) {
    #setup-screen .pg-game-mode-options {
        grid-template-columns: 1fr;
    }
}
/* ==================================================
   شعار الشبكة ونافذة شرح أنماط اللعب
   ================================================== */

/* شعار الشبكة السداسي */

#setup-screen .pg-hex-mode-icon {
    display: grid;
    grid-template-columns: repeat(2, 20px);
    justify-content: center;
    align-content: center;
    width: 48px;
    height: 48px;
    gap: 1px;
}

#setup-screen .pg-mini-hex {
    display: block;
    width: 22px;
    height: 25px;

    clip-path: polygon(
        25% 0%,
        75% 0%,
        100% 50%,
        75% 100%,
        25% 100%,
        0% 50%
    );

    filter: drop-shadow(
        0 2px 3px rgba(0, 0, 0, 0.35)
    );
}

#setup-screen .pg-mini-hex-red {
    background: linear-gradient(
        145deg,
        #ff5b63,
        #d80e22
    );
}

#setup-screen .pg-mini-hex-green {
    background: linear-gradient(
        145deg,
        #43dc75,
        #078a3d
    );
}

#setup-screen
.pg-hex-mode-icon
.pg-mini-hex:nth-child(2) {
    transform: translateY(13px);
}

#setup-screen
.pg-hex-mode-icon
.pg-mini-hex:nth-child(4) {
    transform: translateY(12px);
}

/* زر علامة الاستفهام */

#setup-screen .pg-mode-info-button {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 29px;
    height: 29px;
    padding: 0;

    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

#setup-screen .pg-mode-info-button:hover {
    color: #142864;
    background: #ffffff;
    transform: scale(1.1);
}

/* خلفية نافذة الشرح */

.pg-mode-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

    display: grid;
    place-items: center;
    padding: 20px;

    background: rgba(4, 13, 38, 0.82);
    backdrop-filter: blur(7px);
}

.pg-mode-info-overlay.pg-mode-info-hidden {
    display: none !important;
}

/* صندوق الشرح */

.pg-mode-info-box {
    position: relative;
    width: min(440px, 94vw);
    padding: 30px 25px 24px;

    border: 2px solid #ffd85a;
    border-radius: 24px;

    color: #ffffff;
    text-align: center;

    background: linear-gradient(
        145deg,
        #1552ad,
        #172765
    );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.50);

    animation: pgModeInfoEntrance 0.25s ease;
}

.pg-mode-info-close {
    position: absolute;
    top: 10px;
    left: 12px;

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);

    font-size: 24px;
    cursor: pointer;
}

.pg-mode-info-icon {
    margin-bottom: 5px;
    font-size: 3.3rem;
}

.pg-mode-info-box h2 {
    margin: 5px 0 10px;
    color: #ffd85a;
    font-size: 1.7rem;
}

.pg-mode-info-box p {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.9;
}

.pg-mode-info-ok {
    min-width: 130px;
    margin-top: 20px;
    padding: 10px 20px;

    border: none;
    border-radius: 12px;

    color: #142864;
    background: #ffd85a;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;
}

@keyframes pgModeInfoEntrance {
    from {
        opacity: 0;
        transform: scale(0.88);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* فصل علامة الشرح عن دائرة اختيار نمط اللعب */

#setup-screen .pg-game-mode-card {
    position: relative;
    padding-left: 58px;
}

#setup-screen .pg-mode-info-button {
    position: absolute;
    top: 9px;
    left: 12px;
    margin: 0;
    z-index: 3;
}

#setup-screen .pg-game-mode-check {
    position: absolute;
    bottom: 9px;
    left: 14px;
    margin: 0;
}
/* التصحيح النهائي لترتيب بطاقات نمط اللعب */

#setup-screen .pg-game-mode-card {
    position: relative;
    padding: 12px 16px;
}

#setup-screen .pg-mode-info-button {
    position: static;
    margin-inline-start: auto;
    flex-shrink: 0;
}

#setup-screen .pg-game-mode-check {
    position: static;
    margin: 0;
    flex-shrink: 0;
}
/* ==================================================
   شاشة لعبة الشبكة المستقلة
   ================================================== */

.pg-hex-hidden {
    display: none !important;
}

#pg-hex-game-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;

    width: 100%;
    height: 100%;

    overflow: auto;

    color: #ffffff;
    background:
        radial-gradient(
            circle at top,
            #174f9d,
            #071b50 70%
        );

    font-family: inherit;
}

#pg-hex-game-screen .pg-hex-game-shell {
    width: min(1180px, 96%);
    min-height: 100%;
    margin: auto;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* أعلى الشاشة */

#pg-hex-game-screen .pg-hex-game-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 0.65fr)
        minmax(0, 1fr);

    gap: 14px;
    align-items: stretch;
}

#pg-hex-game-screen .pg-hex-team,
#pg-hex-game-screen .pg-hex-turn-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 85px;
    padding: 12px;

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;

    text-align: center;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

#pg-hex-game-screen .pg-hex-team strong,
#pg-hex-game-screen .pg-hex-turn-box strong {
    font-size: 1.25rem;
}

#pg-hex-game-screen .pg-hex-team small,
#pg-hex-game-screen .pg-hex-turn-box span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.82);
}

#pg-hex-game-screen .pg-hex-team-red {
    background:
        linear-gradient(
            145deg,
            #c8182c,
            #7d1021
        );
}

#pg-hex-game-screen .pg-hex-team-green {
    background:
        linear-gradient(
            145deg,
            #11904a,
            #075b31
        );
}

#pg-hex-game-screen .pg-hex-turn-box {
    border-color: #ffd85a;

    background:
        linear-gradient(
            145deg,
            #2259bb,
            #172d77
        );
}

#pg-hex-game-screen .pg-hex-turn-box strong {
    color: #ffd85a;
}

/* رسالة اختيار الخلية */

#pg-hex-game-screen .pg-hex-question-message {
    padding: 12px 18px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;

    color: #ffffff;
    background: rgba(4, 20, 65, 0.65);

    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
}

/* حاوية اللوحة */

#pg-hex-game-screen .pg-hex-board-wrapper {
    position: relative;

    width: min(790px, 96%);
    aspect-ratio: 1.32 / 1;
    margin: auto;

    padding:
        58px
        68px;

    overflow: hidden;

    border: 5px solid #202735;
    border-radius: 24px;

    background: #fffaf5;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.42);
}

/* أطراف الأحمر والأخضر */

#pg-hex-game-screen .pg-hex-border {
    position: absolute;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 900;
}

#pg-hex-game-screen .pg-hex-border-top,
#pg-hex-game-screen .pg-hex-border-bottom {
    right: 0;
    left: 0;

    height: 58px;

    background:
        linear-gradient(
            90deg,
            #087436,
            #16a453,
            #087436
        );
}

#pg-hex-game-screen .pg-hex-border-top {
    top: 0;
}

#pg-hex-game-screen .pg-hex-border-bottom {
    bottom: 0;
}

#pg-hex-game-screen .pg-hex-border-left,
#pg-hex-game-screen .pg-hex-border-right {
    top: 0;
    bottom: 0;

    width: 68px;

    background:
        linear-gradient(
            180deg,
            #b91126,
            #ef3340,
            #b91126
        );
}

#pg-hex-game-screen .pg-hex-border-left {
    left: 0;
}

#pg-hex-game-screen .pg-hex-border-right {
    right: 0;
}

#pg-hex-game-screen
.pg-hex-border-left {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* مكان الخلايا */

#pg-hex-game-screen .pg-hex-board {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: center;

    width: 100%;
    height: 100%;

    padding-inline-end: 8%;
}

/* زر الرجوع */

#pg-hex-game-screen .pg-hex-back-button {
    align-self: center;

    min-width: 210px;
    padding: 11px 22px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 13px;

    color: #ffffff;
    background: rgba(10, 39, 100, 0.85);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;
}

#pg-hex-game-screen
.pg-hex-back-button:hover {
    border-color: #ffd85a;
    background: #164eac;
}

/* الشاشات الصغيرة */

@media (max-width: 700px) {
    #pg-hex-game-screen .pg-hex-game-header {
        grid-template-columns: 1fr 1fr;
    }

    #pg-hex-game-screen .pg-hex-turn-box {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #pg-hex-game-screen .pg-hex-board-wrapper {
        padding: 42px 40px;
    }

    #pg-hex-game-screen .pg-hex-border-top,
    #pg-hex-game-screen .pg-hex-border-bottom {
        height: 42px;
        font-size: 0.68rem;
    }

    #pg-hex-game-screen .pg-hex-border-left,
    #pg-hex-game-screen .pg-hex-border-right {
        width: 40px;
        font-size: 0.68rem;
    }
}
/* ==================================================
   الخلايا السداسية المطابقة للصورة
   الرأس في الأعلى والأسفل
   ================================================== */

#pg-hex-game-screen .pg-hex-board {
    --pg-hex-width:
        clamp(74px, 11.5vw, 112px);

    --pg-hex-height:
        calc(var(--pg-hex-width) * 1.08);

    --pg-hex-row-step:
        calc(var(--pg-hex-height) * 0.75);

    display: grid;

    grid-template-columns:
        repeat(5, var(--pg-hex-width));

    grid-auto-rows:
        var(--pg-hex-row-step);

    justify-content: center;
    align-content: center;

    width: 100%;
    height: 100%;

    padding:
        0
        calc(var(--pg-hex-width) / 2)
        calc(var(--pg-hex-height) / 4)
        0;

    column-gap: 0;
    row-gap: 0;

    overflow: visible;
}

#pg-hex-game-screen button.pg-hex-cell {
    position: relative;

    display: grid !important;
    place-items: center !important;

    width:
        var(--pg-hex-width) !important;

    height:
        var(--pg-hex-height) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    /* رأس أعلى وأسفل وجوانب مستقيمة */
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );

    color: #202735 !important;
    background: #202735 !important;

    font-family: inherit !important;
    font-size:
        clamp(17px, 2vw, 27px) !important;

    font-weight: 900 !important;
    line-height: 1 !important;

    text-shadow: none !important;
    box-shadow: none !important;

    cursor: pointer;

    isolation: isolate;

    transition:
        filter 0.18s ease,
        scale 0.18s ease;
}

/* الجزء الأبيض داخل السداسي */

#pg-hex-game-screen
button.pg-hex-cell::before {
    content: "";

    position: absolute;
    inset: 4px;
    z-index: -1;

    display: block !important;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );

    background: #fffaf5;

    transform: none !important;
}

/* إلغاء أي تأثير قديم */

#pg-hex-game-screen
button.pg-hex-cell::after {
    display: none !important;
    content: none !important;
}

/* إزاحة الصف الثاني والرابع نصف خلية */

#pg-hex-game-screen
button.pg-hex-cell:nth-child(n+6):nth-child(-n+10),

#pg-hex-game-screen
button.pg-hex-cell:nth-child(n+16):nth-child(-n+20) {
    transform:
        translateX(
            calc(var(--pg-hex-width) / 2)
        ) !important;
}

/* المرور فوق الخلية */

#pg-hex-game-screen
button.pg-hex-cell:hover {
    z-index: 10;

    filter:
        brightness(1.04)
        drop-shadow(
            0 0 8px rgba(255, 216, 90, 0.9)
        );

    scale: 1.035;
}

/* الخلية المختارة */

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-cell-selected {
    z-index: 9;

    color: #172452 !important;

    filter:
        drop-shadow(
            0 0 11px rgba(255, 216, 90, 0.95)
        );
}

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-cell-selected::before {
    background: #ffd85a;
}

@media (max-width: 700px) {
    #pg-hex-game-screen .pg-hex-board {
        --pg-hex-width:
            clamp(58px, 17vw, 76px);
    }

    #pg-hex-game-screen
    button.pg-hex-cell::before {
        inset: 3px;
    }
}
/* امتلاك الخلايا في لعبة الشبكة */

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-red::before {
    background:
        linear-gradient(
            145deg,
            #ff5663,
            #d3132a
        );
}

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-green::before {
    background:
        linear-gradient(
            145deg,
            #42d875,
            #078b40
        );
}

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-red,

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-green {
    color: #ffffff !important;
    cursor: default;
}
/* الطريق المكتمل والفوز في الشبكة */

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell {
    z-index: 12;

    animation:
        pgHexWinningCell 0.65s
        ease-in-out infinite alternate;
}

#pg-hex-game-screen
.pg-hex-board.pg-hex-board-finished {
    pointer-events: none;
}

#pg-hex-game-screen
.pg-hex-question-message.pg-hex-win-message {
    border-color: #ffd85a;
    color: #172452;
    background: #ffd85a;

    font-size: 1.3rem;

    box-shadow:
        0 0 22px rgba(255, 216, 90, 0.65);
}

@keyframes pgHexWinningCell {
    to {
        scale: 1.07;

        filter:
            brightness(1.25)
            drop-shadow(0 0 14px #ffffff);
    }
}
/* ==================================================
   نافذة سؤال لعبة الشبكة
   ================================================== */

#pg-hex-game-screen
.pg-hex-question-overlay {
    position: fixed;
    inset: 0;
    z-index: 22000;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(3, 12, 38, 0.84);
    backdrop-filter: blur(8px);
}

#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-hidden {
    display: none !important;
}

#pg-hex-game-screen
.pg-hex-question-card {
    position: relative;

    width: min(650px, 94vw);
    padding: 24px;

    border: 2px solid #4fb4ff;
    border-radius: 24px;

    color: #ffffff;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #1555b2,
            #142663
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.50);
}

/* اسم الفريق ورقم الخلية */

#pg-hex-game-screen
.pg-hex-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 14px;
}

#pg-hex-game-screen
.pg-hex-question-header span {
    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 20px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);

    font-size: 0.9rem;
    font-weight: 800;
}

/* المؤقت */

#pg-hex-game-screen
.pg-hex-question-timer {
    display: grid;
    place-items: center;

    width: 82px;
    height: 82px;
    margin: 0 auto 15px;

    border: 6px solid #ffd85a;
    border-radius: 50%;

    color: #ffd85a;
    background: rgba(5, 24, 76, 0.75);

    font-size: 2rem;
    font-weight: 900;

    box-shadow:
        0 0 20px rgba(255, 216, 90, 0.28);
}

#pg-hex-game-screen
.pg-hex-question-timer.pg-hex-timer-warning {
    color: #ffffff;
    border-color: #ff4b59;
    background: #b91529;

    animation:
        pgHexTimerWarning 0.55s
        ease-in-out infinite alternate;
}

/* نص السؤال */

#pg-hex-game-screen
.pg-hex-question-text {
    min-height: 90px;
    margin: 8px 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: clamp(1.25rem, 2.3vw, 1.75rem);
    line-height: 1.7;
}

/* زر إظهار الإجابة */

#pg-hex-game-screen
.pg-hex-show-answer {
    position: relative !important;
top: 25px !important;
    min-width: 210px;
    padding: 11px 22px;

    border: none;
    border-radius: 13px;

    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #1da3e9,
            #1268bc
        );

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;
}

/* الإجابة */

#pg-hex-game-screen
.pg-hex-answer-area {
    padding: 15px;
    margin-top: 10px;

    border: 2px solid #43da7d;
    border-radius: 15px;

    background: rgba(18, 154, 77, 0.20);
}

#pg-hex-game-screen
.pg-hex-answer-area span {
    display: block;

    margin-bottom: 5px;

    color: #9dffc2;
    font-size: 0.85rem;
}

#pg-hex-game-screen
.pg-hex-answer-area strong {
    color: #ffffff;
    font-size: 1.4rem;
}

/* أزرار الحكم */

#pg-hex-game-screen
.pg-hex-judgement-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;
    margin-top: 15px;
}

#pg-hex-game-screen
.pg-hex-correct-button,
#pg-hex-game-screen
.pg-hex-wrong-button {
    padding: 12px 18px;

    border: none;
    border-radius: 13px;

    color: #ffffff;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;
}

#pg-hex-game-screen
.pg-hex-correct-button {
    background:
        linear-gradient(
            145deg,
            #23bb62,
            #087e3d
        );
}

#pg-hex-game-screen
.pg-hex-wrong-button {
    background:
        linear-gradient(
            145deg,
            #f04755,
            #ae1428
        );
}

@keyframes pgHexTimerWarning {
    to {
        transform: scale(1.07);
        box-shadow:
            0 0 22px rgba(255, 75, 89, 0.85);
    }
}
/* ==================================================
   احتفالية فوز لعبة الشبكة
   ================================================== */

#pg-hex-game-screen .pg-hex-win-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;

    display: grid;
    place-items: center;

    padding: 20px;
    overflow: hidden;

    background:
        radial-gradient(
            circle,
            rgba(30, 85, 180, 0.82),
            rgba(2, 10, 36, 0.95)
        );

    backdrop-filter: blur(8px);
}

#pg-hex-game-screen
.pg-hex-win-overlay.pg-hex-hidden {
    display: none !important;
}

#pg-hex-game-screen .pg-hex-win-card {
    position: relative;
    z-index: 4;

    width: min(500px, 94vw);
    padding: 34px 25px;

    border: 3px solid #ffd85a;
    border-radius: 26px;

    color: #ffffff;
    text-align: center;

    background:
        linear-gradient(
            145deg,
            #1761c7,
            #172765
        );

    box-shadow:
        0 0 55px rgba(255, 216, 90, 0.45);

    animation:
        pgHexWinCardEntrance 0.55s
        cubic-bezier(0.2, 1.4, 0.4, 1);
}

#pg-hex-game-screen .pg-hex-win-trophy {
    font-size: 5rem;

    animation:
        pgHexTrophy 0.8s
        ease-in-out infinite alternate;
}

#pg-hex-game-screen .pg-hex-win-card h2 {
    margin: 5px 0;
    color: #ffd85a;
    font-size: 2.2rem;
}

#pg-hex-game-screen .pg-hex-win-card p {
    margin: 8px 0 4px;
    font-size: 1.1rem;
}

#pg-hex-game-screen #pg-hex-winner-name {
    display: block;

    margin: 4px 0 20px;

    color: #ffffff;
    font-size: 2rem;
}

#pg-hex-game-screen
#pg-hex-win-settings-button {
    min-width: 190px;
    padding: 12px 22px;

    border: none;
    border-radius: 14px;

    color: #172452;
    background: #ffd85a;

    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 900;

    cursor: pointer;
}

/* قطع الكونفيتي */

#pg-hex-game-screen .pg-hex-confetti-piece {
    position: absolute;
    top: -40px;
    z-index: 2;

    width: 12px;
    height: 20px;

    border-radius: 3px;

    animation:
        pgHexConfettiFall
        var(--pg-fall-time)
        linear
        infinite;

    animation-delay:
        var(--pg-delay);
}

@keyframes pgHexWinCardEntrance {
    from {
        opacity: 0;
        transform: scale(0.55) rotate(-7deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes pgHexTrophy {
    to {
        transform: scale(1.12) rotate(5deg);
    }
}

@keyframes pgHexConfettiFall {
    from {
        transform:
            translateY(-10vh)
            rotate(0deg);
    }

    to {
        transform:
            translateY(115vh)
            rotate(720deg);
    }
}
/* نقاط ورقم جولة لعبة الشبكة */

#pg-hex-game-screen .pg-hex-team-score {
    display: block;

    margin: 5px 0;
    padding: 4px 13px;

    border-radius: 20px;

    color: #172452;
    background: #ffffff;

    font-size: 1.15rem;
    font-weight: 900;
}

#pg-hex-game-screen #pg-hex-round-label {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
}
/* ==================================================
   تثبيت حجم صورة العلم داخل سؤال الشبكة
   ومنع تأثرها بتنسيقات الصور القديمة
   ================================================== */

#pg-hex-game-screen
img#pg-hex-question-image {
    position: static !important;
    inset: auto !important;

    display: block !important;

    width: 300px !important;
    height: 180px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 80% !important;
    max-height: 180px !important;

    margin:
        0
        auto
        18px !important;

    padding: 0 !important;

    border: 3px solid #ffffff !important;
    border-radius: 14px !important;

    object-fit: contain !important;
    object-position: center !important;

    background: #ffffff !important;

    transform: none !important;
    scale: 1 !important;

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.30) !important;
}

#pg-hex-game-screen
img#pg-hex-question-image.pg-hex-hidden {
    display: none !important;
}

/* ضمان بقاء بطاقة السؤال داخل الشاشة */

#pg-hex-game-screen
.pg-hex-question-card {
    max-height: 92vh !important;
    overflow-y: auto !important;
}
/* الصورة الكاملة في إجابة فئة زوم */

#pg-hex-game-screen
img#pg-hex-answer-image {
    position: static !important;
    inset: auto !important;

    display: block !important;

    width: 280px !important;
    height: 170px !important;

    max-width: 85% !important;
    max-height: 170px !important;

    margin:
        0
        auto
        12px !important;

    border: 3px solid #ffffff !important;
    border-radius: 13px !important;

    object-fit: contain !important;
    object-position: center !important;

    background: #ffffff !important;

    transform: none !important;

    box-shadow:
        0 10px 22px
        rgba(0, 0, 0, 0.28) !important;
}

#pg-hex-game-screen
img#pg-hex-answer-image.pg-hex-hidden {
    display: none !important;
}
/* فيديو فئة شوف وركّز داخل الشبكة */

#pg-hex-game-screen
video#pg-hex-question-video {
    position: static !important;

    display: block !important;

    width: min(480px, 90%) !important;
    height: 260px !important;

    max-width: 90% !important;
    max-height: 260px !important;

    margin:
        0
        auto
        18px !important;

    border: 3px solid #ffffff !important;
    border-radius: 15px !important;

    object-fit: contain !important;
    background: #000000 !important;

    transform: none !important;

    box-shadow:
        0 12px 27px
        rgba(0, 0, 0, 0.35) !important;
}

#pg-hex-game-screen
video#pg-hex-question-video.pg-hex-hidden {
    display: none !important;
}
/* مشغل فئة اسمع وركّز */

#pg-hex-game-screen
.pg-hex-audio-box {
    width: min(460px, 90%);
    margin: 0 auto 18px;
    padding: 17px;

    border: 2px solid #62c8ff;
    border-radius: 17px;

    color: #ffffff;
    background: rgba(4, 32, 91, 0.70);

    text-align: center;

    box-shadow:
        0 12px 27px
        rgba(0, 0, 0, 0.28);
}

#pg-hex-game-screen
.pg-hex-audio-box.pg-hex-hidden {
    display: none !important;
}

#pg-hex-game-screen
.pg-hex-audio-icon {
    font-size: 3rem;
}

#pg-hex-game-screen
.pg-hex-audio-box p {
    margin: 4px 0 12px;
    font-weight: 800;
}

#pg-hex-game-screen
#pg-hex-question-audio {
    display: block;
    width: 100%;
}
/* ==================================================
   فئة حروف متحركة داخل لعبة الشبكة
   ================================================== */

#pg-hex-game-screen
.pg-hex-moving-letters-box {
    width: min(500px, 92%);
    margin: 0 auto 18px;
    padding: 16px;

    border: 2px solid #ffd85a;
    border-radius: 17px;

    background:
        rgba(5, 31, 86, 0.78);

    box-shadow:
        0 12px 27px
        rgba(0, 0, 0, 0.30);
}

#pg-hex-game-screen
.pg-hex-moving-letters-box.pg-hex-hidden {
    display: none !important;
}

#pg-hex-game-screen
#pg-hex-moving-letters-clue {
    margin: 0 0 13px;

    color: #ffd85a;

    font-size: 1.05rem;
    font-weight: 900;
    text-align: center;
}

#pg-hex-game-screen
.pg-hex-moving-letters-stage {
    position: relative;

    width: 100%;
    height: 145px;

    overflow: hidden;

    border: 1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 13px;

    background:
        radial-gradient(
            circle,
            #184f9e,
            #081e58
        );
}

#pg-hex-game-screen
.pg-hex-moving-letter {
    position: absolute;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    color: #172452;
    background: #ffd85a;

    font-size: 1.45rem;
    font-weight: 900;

    box-shadow:
        0 5px 13px
        rgba(0, 0, 0, 0.35);
}
/* جاي بالغلط داخل لعبة الشبكة */
.pg-hex-odd-one-out-box {
    width: min(620px, 92%);
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #4fc3ff;
    border-radius: 20px;
    background: rgba(8, 38, 94, 0.92);
}

.pg-hex-odd-one-out-title {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
}

.pg-hex-odd-one-out-words {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pg-hex-odd-one-out-word {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2270cc,
        #123d87
    );
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 600px) {
    .pg-hex-odd-one-out-words {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* بدون كلام داخل لعبة الشبكة */
.pg-hex-charades-box {
    width: min(320px, 90%);
    margin: 18px auto;
    padding: 18px;
    border: 2px solid #4fc3ff;
    border-radius: 20px;
    background: rgba(8, 38, 94, 0.94);
    text-align: center;
}

.pg-hex-charades-box p {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}

.pg-hex-charades-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 126px;
    margin: auto;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
}

.pg-hex-charades-qr img,
.pg-hex-charades-qr canvas {
    width: 110px !important;
    height: 110px !important;
}
/* الأقرب يكسب داخل لعبة الشبكة */
.pg-hex-closest-box {
    width: min(620px, 92%);
    margin: 18px auto;
    padding: 18px;
    border: 2px solid #4fc3ff;
    border-radius: 20px;
    background: rgba(8, 38, 94, 0.94);
}

.pg-hex-closest-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pg-hex-closest-inputs label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.pg-hex-closest-inputs input {
    width: 100%;
    padding: 13px;
    border: 2px solid #5caeff;
    border-radius: 13px;
    outline: none;
    color: #102044;
    background: #ffffff;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    box-sizing: border-box;
}

#pg-hex-closest-submit {
    display: block;
    width: min(280px, 100%);
    margin: 16px auto 0;
    padding: 13px;
    border: 0;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #168ee0,
        #0758ae
    );
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

#pg-hex-closest-result {
    margin: 15px 0 0;
    padding: 13px;
    border-radius: 13px;
    color: #17213b;
    background: #ffd857;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 600px) {
    .pg-hex-closest-inputs {
        grid-template-columns: 1fr;
    }
}
/* ضمان ظهور تخمينات الأقرب داخل الشبكة */
#pg-hex-closest-box .pg-hex-closest-inputs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#pg-hex-closest-box .pg-hex-closest-inputs label {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#pg-hex-closest-red-input,
#pg-hex-closest-green-input {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pg-hex-show-answer.pg-hex-hidden,
.pg-hex-judgement-buttons.pg-hex-hidden {
    display: none !important;
}
/* تحكم يدوي بشكل زوايا الشبكة */
#pg-hex-game-screen .pg-hex-board-wrapper {
    /* عدّل هذه الأرقام الثلاثة فقط */
    --pg-corner-height: 16%;
    --pg-corner-inset: 12.5%;
    --pg-red-depth: 24%;

    background: #fffaf5;
}

/* عمق الأحمر من اليمين واليسار */
#pg-hex-game-screen .pg-hex-border-left,
#pg-hex-game-screen .pg-hex-border-right {
    z-index: 1;
    width: var(--pg-red-depth);
}

/* ارتفاع الأخضر من فوق وتحت */
#pg-hex-game-screen .pg-hex-border-top,
#pg-hex-game-screen .pg-hex-border-bottom {
    z-index: 2;
    right: 0;
    left: 0;
    height: var(--pg-corner-height);
    box-sizing: border-box;
}

/* الزاويتان العلويتان */
#pg-hex-game-screen .pg-hex-border-top {
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--pg-corner-inset)) 100%,
        var(--pg-corner-inset) 100%
    );

    align-items: flex-start;
    padding-top: 14px;
}

/* الزاويتان السفليتان */
#pg-hex-game-screen .pg-hex-border-bottom {
    clip-path: polygon(
        var(--pg-corner-inset) 0,
        calc(100% - var(--pg-corner-inset)) 0,
        100% 100%,
        0 100%
    );

    align-items: flex-end;
    padding-bottom: 14px;
}

/* الخلايا فوق الطرق */
#pg-hex-game-screen .pg-hex-board {
    position: relative;
    z-index: 3;
}
/* تحكم مستقل بجهة اليمين فقط */
#pg-hex-game-screen .pg-hex-board-wrapper {
    /* عدّل هذين الرقمين فقط */
    --pg-right-corner-inset: 19.5%;
    --pg-right-red-depth: 24%;
}

/* عمق الأحمر من جهة اليمين فقط */
#pg-hex-game-screen .pg-hex-border-right {
    width: var(--pg-right-red-depth);
}

/* تعديل الزاوية الخضراء العلوية اليمنى فقط */
#pg-hex-game-screen .pg-hex-border-top {
    clip-path: polygon(
        0 0,
        100% 0,
        calc(
            100% -
            var(--pg-right-corner-inset)
        ) 100%,
        var(--pg-corner-inset) 100%
    );
}

/* تعديل الزاوية الخضراء السفلية اليمنى فقط */
#pg-hex-game-screen .pg-hex-border-bottom {
    clip-path: polygon(
        var(--pg-corner-inset) 0,
        calc(
            100% -
            var(--pg-right-corner-inset)
        ) 0,
        100% 100%,
        0 100%
    );
}
/* ==========================================
   مظهر 3D مودرن لخلايا الشبكة فقط
   لا يغيّر المواقع أو الزوايا
========================================== */

/* الإطار الخارجي بعمق أكبر */
#pg-hex-game-screen .pg-hex-board-wrapper {
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.48),
        0 8px 16px rgba(0, 0, 0, 0.32),
        inset 0 3px 4px rgba(255, 255, 255, 0.13),
        inset 0 -6px 10px rgba(0, 0, 0, 0.28);
}

/* جسم الخلية والحافة الخارجية */
#pg-hex-game-screen button.pg-hex-cell {
    background:
        linear-gradient(
            145deg,
            #525c70 0%,
            #252d3c 38%,
            #101621 72%,
            #080c13 100%
        ) !important;

    color: #182033 !important;

    text-shadow:
        0 1px 0 #ffffff,
        0 2px 4px rgba(0, 0, 0, 0.18) !important;

    filter:
        drop-shadow(
            0 7px 0 rgba(7, 11, 18, 0.95)
        )
        drop-shadow(
            0 11px 10px rgba(0, 0, 0, 0.28)
        );

    transition:
        filter 0.22s ease,
        scale 0.22s ease;
}

/* سطح الخلية الأبيض البارز */
#pg-hex-game-screen button.pg-hex-cell::before {
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffdf9 25%,
            #f4efe8 62%,
            #d8d1c7 100%
        ) !important;

    box-shadow:
        inset 0 5px 7px rgba(255, 255, 255, 0.95),
        inset 0 -8px 11px rgba(88, 78, 65, 0.18),
        inset 5px 0 8px rgba(255, 255, 255, 0.3),
        inset -4px 0 7px rgba(30, 37, 49, 0.1);
}

/* لمعة زجاجية خفيفة فوق سطح الخلية */
#pg-hex-game-screen button.pg-hex-cell::after {
    content: "" !important;
    display: block !important;

    position: absolute;
    inset: 4px;
    z-index: -1;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.18) 25%,
            transparent 48%,
            rgba(20, 27, 39, 0.13) 100%
        );

    pointer-events: none;
}

/* حركة مودرن عند مرور الماوس */
#pg-hex-game-screen button.pg-hex-cell:hover {
    z-index: 10;

    scale: 1.045;

    filter:
        brightness(1.06)
        drop-shadow(
            0 9px 0 rgba(7, 11, 18, 0.92)
        )
        drop-shadow(
            0 15px 14px rgba(0, 0, 0, 0.34)
        )
        drop-shadow(
            0 0 9px rgba(84, 181, 255, 0.48)
        );
}

/* إحساس الضغط عند النقر */
#pg-hex-game-screen button.pg-hex-cell:active {
    scale: 0.975;

    filter:
        brightness(0.98)
        drop-shadow(
            0 3px 0 rgba(7, 11, 18, 0.95)
        )
        drop-shadow(
            0 6px 7px rgba(0, 0, 0, 0.3)
        );
}

/* الخلية المختارة */
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-cell-selected {
    color: #5b4100 !important;

    filter:
        drop-shadow(
            0 7px 0 #9e6d00
        )
        drop-shadow(
            0 13px 12px rgba(0, 0, 0, 0.32)
        )
        drop-shadow(
            0 0 12px rgba(255, 216, 90, 0.95)
        );
}

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-cell-selected::before {
    background:
        linear-gradient(
            145deg,
            #fff4a8 0%,
            #ffd85a 48%,
            #e9a900 100%
        ) !important;
}

/* الخلية الحمراء بشكل 3D */
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-red::before {
    background:
        linear-gradient(
            145deg,
            #ff7b84 0%,
            #f13245 45%,
            #a90720 100%
        ) !important;

    box-shadow:
        inset 0 5px 7px rgba(255, 255, 255, 0.32),
        inset 0 -9px 12px rgba(74, 0, 13, 0.36);
}

/* الخلية الخضراء بشكل 3D */
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-green::before {
    background:
        linear-gradient(
            145deg,
            #70ee96 0%,
            #20bd5c 45%,
            #056c31 100%
        ) !important;

    box-shadow:
        inset 0 5px 7px rgba(255, 255, 255, 0.32),
        inset 0 -9px 12px rgba(0, 67, 28, 0.38);
}

/* أرقام الخلايا الملونة */
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-red,
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-owned-green {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.55) !important;
}
/* ==========================================
   مؤشر الدور في الشبكة بنفس أسلوب البازل
========================================== */

#pg-hex-game-screen .pg-hex-turn-box {
    width: 260px;
    padding: 6px 12px 9px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    border: 2px solid rgba(255, 211, 79, 0.85);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 80, 168, 0.97),
            rgba(6, 37, 100, 0.98)
        );

    box-shadow:
        0 5px 0 rgba(4, 26, 75, 0.9),
        0 0 18px rgba(255, 205, 65, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.18);

    line-height: 1.15;
}

/* رقم الجولة */
#pg-hex-game-screen
.pg-hex-turn-box #pg-hex-round-label {
    color: #d9edff;
    font-size: 18px;
    font-weight: 700;
}

/* عبارة الدور الآن */
#pg-hex-game-screen

.pg-hex-turn-box > span {
    position: relative !important;
top: -3px !important;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

/* اسم الفريق صاحب الدور */
#pg-hex-game-screen

#pg-hex-current-team {
    display: block;
    max-width: 230px;

    color: #ffe169;
    font-size: 22px;
    font-weight: 900;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(255, 213, 70, 0.75);

    animation:
        pgHexActiveTeamGlow
        1.6s ease-in-out infinite;
}

@keyframes pgHexActiveTeamGlow {
    0%,
    100% {
        color: #ffe169;

        text-shadow:
            0 2px 2px rgba(0, 0, 0, 0.55),
            0 0 7px rgba(255, 213, 70, 0.55);
    }

    50% {
        color: #ffffff;

        text-shadow:
            0 2px 2px rgba(0, 0, 0, 0.55),
            0 0 15px rgba(255, 220, 90, 1);
    }
}
/* تحريك اسمي الفريقين يدويًا */
#pg-hex-red-team-name,
#pg-hex-green-team-name {
    position: relative !important;
    top: 20 !important;
}
/* ==========================================
   جميع أزرار لعبة الشبكة بشكل 3D
========================================== */

#pg-hex-game-screen
button:not(.pg-hex-cell) {
    position: relative;

    border: 1px solid
        rgba(255, 255, 255, 0.28) !important;

    box-shadow:
        0 6px 0 rgba(5, 15, 38, 0.9),
        0 10px 15px rgba(0, 0, 0, 0.3),
        inset 0 3px 2px rgba(255, 255, 255, 0.22),
        inset 0 -3px 5px rgba(0, 0, 0, 0.2) !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.42);

    filter:
        saturate(1.08)
        brightness(1.02);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease !important;
}

/* عند مرور الماوس */
#pg-hex-game-screen
button:not(.pg-hex-cell):not(:disabled):hover {
    transform:
        translateY(-3px) !important;

    box-shadow:
        0 9px 0 rgba(5, 15, 38, 0.9),
        0 15px 19px rgba(0, 0, 0, 0.34),
        inset 0 3px 2px rgba(255, 255, 255, 0.28),
        inset 0 -3px 5px rgba(0, 0, 0, 0.18) !important;

    filter:
        saturate(1.15)
        brightness(1.08);
}

/* عند الضغط */
#pg-hex-game-screen
button:not(.pg-hex-cell):not(:disabled):active {
    transform:
        translateY(4px) !important;

    box-shadow:
        0 2px 0 rgba(5, 15, 38, 0.95),
        0 4px 7px rgba(0, 0, 0, 0.27),
        inset 0 3px 5px rgba(0, 0, 0, 0.24) !important;

    filter:
        brightness(0.96);
}

/* الزر المعطل */
#pg-hex-game-screen
button:not(.pg-hex-cell):disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow:
        0 3px 0 rgba(5, 15, 38, 0.75),
        inset 0 2px 2px rgba(255, 255, 255, 0.12) !important;
}
/* إخفاء زر الرجوع وتحرير مساحته */
#pg-hex-game-screen .pg-hex-back-button {
    display: none !important;
}
/* إخفاء صندوق تعليمات اختيار الخلية وتحرير مساحته */
#pg-hex-game-screen .pg-hex-question-message {
    display: none !important;
}
#pg-hex-game-screen .pg-hex-board-wrapper {
    width: min(600px, 88%) !important;

    padding:
        40px
        48px !important;
}

#pg-hex-game-screen .pg-hex-board {
    --pg-hex-width:
        clamp(58px, 8.8vw, 82px) !important;
}
/* ==========================================
   وسائل مساعدة جانبية للشبكة
========================================== */

#pg-hex-game-screen .pg-hex-game-shell {
    position: relative;
}

/* شكل لوحة المساعدة */
#pg-hex-game-screen .pg-hex-side-helps {
    position: absolute;
    top: 80%;
    z-index: 20;
    width: 132px;
    padding: 10px;

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 37, 78, 0.96),
            rgba(7, 20, 52, 0.98)
        );

    box-shadow:
        0 8px 0 rgba(3, 12, 34, 0.9),
        0 14px 24px rgba(0, 0, 0, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.16);

    transform: translateY(-50%);
    box-sizing: border-box;
    text-align: center;
}

/* الفريق الأول على اليمين */
#pg-hex-game-screen .pg-hex-team1-helps {
    right: -70px;
    border-color: rgba(205, 214, 226, 0.7);
}

/* الفريق الثاني على اليسار */
#pg-hex-game-screen .pg-hex-team2-helps {
    left: -70px;
    border-color: rgba(176, 111, 255, 0.75);
}

/* اسم الفريق */
#pg-hex-game-screen .pg-hex-side-helps > strong {
    display: block;
    margin-bottom: 9px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ترتيب الأزرار */
#pg-hex-game-screen .pg-hex-side-help-buttons {
    display: grid;
    grid-template-columns: 46px;
    justify-content: center;
    gap: 8px;
}

/* حجم أزرار المساعدة */
#pg-hex-game-screen
.pg-hex-side-help-buttons button {
    width: 46px;
    height: 42px;
    min-width: 0;
    padding: 0;

    border-radius: 12px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #2868c9,
            #103a89
        );

    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}
/* وسيلة المساعدة المستخدمة */
#pg-hex-game-screen
.pg-hex-side-help-buttons
button.pg-hex-help-used {
    opacity: 0.38 !important;
    filter: grayscale(1) !important;
    cursor: not-allowed !important;

    transform:
        translateY(3px) !important;

    box-shadow:
        0 2px 0 rgba(5, 15, 38, 0.8),
        inset 0 3px 5px rgba(0, 0, 0, 0.35) !important;
}
/* إبقاء وسائل المساعدة ظاهرة وقابلة للضغط فوق جميع أسئلة الشبكة */
#pg-hex-game-screen .pg-hex-side-helps {
    z-index: 23050 !important;
    pointer-events: auto !important;
}

/* نافذة السؤال تبقى أسفل وسائل المساعدة */
#pg-hex-game-screen .pg-hex-question-overlay {
    z-index: 22000 !important;
}

#pg-hex-game-screen .pg-hex-team1-helps {
    right: -70px;
    top: 50%;
}

#pg-hex-game-screen .pg-hex-team2-helps {
    left: -70px;
    top: 50%;
}
/* ==========================================
   تكبير نافذة أسئلة وإجابات الشبكة
========================================== */

/* المساحة الخارجية للنافذة */
#pg-hex-game-screen .pg-hex-question-overlay {
    padding: 10px !important;
}

/* البطاقة الرئيسية للسؤال والإجابة */
#pg-hex-game-screen .pg-hex-question-card {
    width: min(820px, 78vw) !important;
    min-height: min(580px, 88dvh) !important;
    max-height: 94dvh !important;

    padding: 28px !important;

    border-radius: 24px !important;
    box-sizing: border-box;
    overflow-y: auto;
}

/* تكبير نص السؤال */
#pg-hex-game-screen .pg-hex-question-text {
    font-size: clamp(
        24px,
        2.4vw,
        34px
    ) !important;

    line-height: 1.45 !important;
    margin: 18px 0 !important;
}

/* تكبير مساحة الصور والفيديو */
#pg-hex-game-screen .pg-hex-question-image,
#pg-hex-game-screen .pg-hex-answer-image,
#pg-hex-game-screen .pg-hex-question-video {
    max-width: 100% !important;
    max-height: 42dvh !important;
    object-fit: contain !important;
}

/* تكبير صندوق الإجابة */
#pg-hex-game-screen .pg-hex-answer-area {
    width: 100% !important;
    min-height: 145px;

    margin-top: 18px !important;
    padding: 20px !important;

    border-radius: 18px !important;
    box-sizing: border-box;
}

/* عنوان الإجابة الصحيحة */
#pg-hex-game-screen .pg-hex-answer-area > span {
    font-size: 16px !important;
}

/* نص الإجابة */
#pg-hex-game-screen #pg-hex-answer-text {
    font-size: clamp(
        24px,
        2.5vw,
        34px
    ) !important;

    line-height: 1.4 !important;
}

/* تكبير أزرار التحكيم */
#pg-hex-game-screen
.pg-hex-judgement-buttons button {
    min-height: 58px;
    padding: 13px 24px !important;
    font-size: 18px !important;
}
/* إخفاء عبارة رقم الخلية ومساحتها */
#pg-hex-question-cell-number {
    display: none !important;
}
/* منع السكرول في سؤال وإجابة الأعلام */
#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-card {
    padding: 16px 24px !important;
    min-height: 0 !important;
    max-height: 92dvh !important;
    transform: translateY(-18px);
}

/* تقليل الفراغ حول سؤال الأعلام */
#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-text {
    margin: 5px 0 !important;
    line-height: 1.15 !important;
}

/* رفع وتصغير صورة العلم قليلًا */
#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-image {
    max-height: 235px !important;
    margin: 5px auto !important;
}

/* تقليل ارتفاع صندوق الإجابة */
#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-answer-area {
    min-height: 90px !important;
    margin-top: 7px !important;
    padding: 10px 16px !important;
}

/* تقليل المسافة حول أزرار التحكيم */
#pg-hex-game-screen
.pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-judgement-buttons {
    margin-top: 8px !important;
}

/* مشغل الصوت في أسئلة الشبكة */
#pg-hex-game-screen .pg-hex-audio-box {
    width: min(560px, 92%);
    margin: 14px auto;
    padding: 15px;

    border: 2px solid rgba(192, 132, 252, 0.75);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(34, 51, 94, 0.97),
            rgba(12, 24, 58, 0.98)
        );

    box-sizing: border-box;
    text-align: center;
}

#pg-hex-game-screen .pg-hex-audio-box p {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

#pg-hex-game-screen
#pg-hex-question-audio {
    display: block !important;
    width: 100% !important;
    margin: auto;
}
/* ==================================================
   جاي بالغلط في الشبكة — شاشة كاملة مستقلة
   لا يؤثر على نسخة البازل
   ================================================== */

.pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
    place-items: center;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(62, 135, 255, 0.28),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(149, 70, 255, 0.24),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #020d25 0%,
            #071d49 50%,
            #020a1d 100%
        );
}

.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    width: min(1180px, 97vw) !important;
    height: min(760px, 96dvh) !important;
    min-height: 0 !important;
    max-height: 96dvh !important;
    padding: 16px 20px !important;
    box-sizing: border-box;
    overflow: hidden !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    border: 2px solid rgba(91, 183, 255, 0.9);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 88, 179, 0.98),
            rgba(13, 48, 115, 0.99)
        );

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.6),
        0 0 45px rgba(48, 149, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* إخفاء العناصر العامة غير المطلوبة في جاي بالغلط */

.pg-hex-odd-one-out-mode
.pg-hex-question-header,

.pg-hex-odd-one-out-mode
.pg-hex-question-text,

.pg-hex-odd-one-out-mode
.pg-hex-question-image,

.pg-hex-odd-one-out-mode
.pg-hex-question-video,

.pg-hex-odd-one-out-mode
.pg-hex-audio-box,

.pg-hex-odd-one-out-mode
.pg-hex-moving-letters-box,

.pg-hex-odd-one-out-mode
.pg-hex-charades-box,

.pg-hex-odd-one-out-mode
.pg-hex-closest-box {
    display: none !important;
}

/* الصندوق الرئيسي */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box {
    width: 100%;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* رأس الفئة */

.pg-hex-odd-one-out-header {
    width: 100%;
    flex: 0 0 auto;
    text-align: center;
}

.pg-hex-odd-one-out-title {
    margin: 0 0 7px;
    color: #ffd54a;
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;

    text-shadow:
        0 4px 0 rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 213, 74, 0.32);
}

.pg-hex-odd-one-out-instruction {
    width: min(760px, 92%);
    margin: 0 auto;
    padding: 9px 18px;
    box-sizing: border-box;

    color: #ffffff;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;

    border: 1px solid rgba(111, 207, 255, 0.7);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(4, 33, 83, 0.86),
            rgba(10, 59, 130, 0.86)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 20px rgba(0, 0, 0, 0.2);
}

/* مساحة الكلمات */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
    box-sizing: border-box;

    border: 2px solid rgba(80, 184, 255, 0.75);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 112, 207, 0.28),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            rgba(2, 19, 53, 0.95),
            rgba(4, 35, 86, 0.94)
        );

    box-shadow:
        inset 0 0 32px rgba(0, 0, 0, 0.38),
        0 10px 25px rgba(0, 0, 0, 0.28);
}

/* مستطيلات الكلمات */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word {
    min-width: 155px;
    min-height: 58px;
    padding: 10px 22px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #08204b;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    white-space: nowrap;

    border: 2px solid #ffffff;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9f4ff 54%,
            #b9ddff 100%
        );

    box-shadow:
        0 7px 0 #2678bc,
        0 12px 23px rgba(0, 0, 0, 0.32),
        inset 0 2px 0 rgba(255, 255, 255, 0.95);

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9);
}

/* زر إظهار الإجابة */

.pg-hex-odd-one-out-mode
.pg-hex-show-answer {
    flex: 0 0 auto;
    min-width: 245px;
    margin: 0 !important;
}

/* صندوق الإجابة */

.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
    flex: 0 0 auto;
    width: min(760px, 94%);
    margin: 0 !important;
    padding: 10px 18px !important;
}

/* أزرار الصح والخطأ فقط */

.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    flex: 0 0 auto;
    width: min(650px, 94%);
    margin: 0 !important;
}

/* الشاشات القصيرة */

@media (max-height: 700px) {
    .pg-hex-odd-one-out-mode
    .pg-hex-question-card {
        padding: 10px 14px !important;
        gap: 6px;
    }

    .pg-hex-odd-one-out-title {
        font-size: 25px;
        margin-bottom: 4px;
    }

    .pg-hex-odd-one-out-instruction {
        padding: 6px 14px;
        font-size: 17px;
    }

    .pg-hex-odd-one-out-mode
    .pg-hex-odd-one-out-words {
        min-height: 250px;
    }

    .pg-hex-odd-one-out-mode
    .pg-hex-odd-one-out-word {
        min-height: 50px;
        font-size: 18px;
    }
}
/* ==================================================
   حركة مستطيلات جاي بالغلط في لعبة الشبكة
   ================================================== */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word {
    position: absolute;
    z-index: 2;
    margin: 0 !important;

    animation-duration: 5.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;

    will-change: transform;
}

/* الكلمة الأولى */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(1) {
    top: 10%;
    left: 7%;
    animation-name: pgHexOddMoveOne;
}

/* الكلمة الثانية */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(2) {
    top: 11%;
    right: 8%;
    animation-name: pgHexOddMoveTwo;
    animation-duration: 6.2s;
}

/* الكلمة الثالثة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(3) {
    top: 42%;
    left: 16%;
    animation-name: pgHexOddMoveThree;
    animation-duration: 5.8s;
}

/* الكلمة الرابعة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(4) {
    top: 41%;
    right: 17%;
    animation-name: pgHexOddMoveFour;
    animation-duration: 6.6s;
}

/* الكلمة الخامسة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(5) {
    bottom: 8%;
    left: 8%;
    animation-name: pgHexOddMoveFive;
    animation-duration: 6.1s;
}

/* الكلمة السادسة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(6) {
    right: 8%;
    bottom: 9%;
    animation-name: pgHexOddMoveSix;
    animation-duration: 5.7s;
}

/* مسارات الحركة */

@keyframes pgHexOddMoveOne {
    0% {
        transform:
            translate(0, 0)
            rotate(-2deg);
    }

    50% {
        transform:
            translate(95px, 35px)
            rotate(2deg);
    }

    100% {
        transform:
            translate(35px, 90px)
            rotate(-1deg);
    }
}

@keyframes pgHexOddMoveTwo {
    0% {
        transform:
            translate(0, 0)
            rotate(2deg);
    }

    50% {
        transform:
            translate(-105px, 42px)
            rotate(-2deg);
    }

    100% {
        transform:
            translate(-35px, 96px)
            rotate(1deg);
    }
}

@keyframes pgHexOddMoveThree {
    0% {
        transform:
            translate(0, 0)
            rotate(1deg);
    }

    50% {
        transform:
            translate(130px, -52px)
            rotate(-2deg);
    }

    100% {
        transform:
            translate(75px, 72px)
            rotate(2deg);
    }
}

@keyframes pgHexOddMoveFour {
    0% {
        transform:
            translate(0, 0)
            rotate(-1deg);
    }

    50% {
        transform:
            translate(-125px, -48px)
            rotate(2deg);
    }

    100% {
        transform:
            translate(-72px, 70px)
            rotate(-2deg);
    }
}

@keyframes pgHexOddMoveFive {
    0% {
        transform:
            translate(0, 0)
            rotate(-2deg);
    }

    50% {
        transform:
            translate(75px, -92px)
            rotate(2deg);
    }

    100% {
        transform:
            translate(145px, -35px)
            rotate(-1deg);
    }
}

@keyframes pgHexOddMoveSix {
    0% {
        transform:
            translate(0, 0)
            rotate(2deg);
    }

    50% {
        transform:
            translate(-80px, -90px)
            rotate(-2deg);
    }

    100% {
        transform:
            translate(-145px, -30px)
            rotate(1deg);
    }
}

/* حركة خفيفة عند مرور المؤشر */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:hover {
    z-index: 10;
    animation-play-state: paused;

    filter:
        brightness(1.08)
        drop-shadow(
            0 0 12px
            rgba(103, 201, 255, 0.75)
        );
}
/* جاي بالغلط في الشبكة — شاشة كاملة */

.pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 999999 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.pg-hex-odd-one-out-mode .pg-hex-question-card {
    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 18px 24px !important;

    box-sizing: border-box !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
/* جاي بالغلط — مستطيلات كلمات 3D */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word {
    position: absolute !important;

    min-width: 155px !important;
    height: 62px !important;

    padding: 0 22px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background:
        linear-gradient(
            180deg,
            #ff9b61 0%,
            #ff6846 52%,
            #e43b2d 100%
        ) !important;

    border:
        3px solid
        rgba(255, 255, 255, 0.95) !important;

    border-radius: 32px !important;

    box-shadow:
        0 8px 0 #9f291f,
        0 14px 24px rgba(0, 0, 0, 0.34),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.38),
        inset 0 -4px 5px
            rgba(104, 13, 8, 0.18) !important;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.32) !important;

    user-select: none;
    pointer-events: none;

    transform: translateZ(0);
    will-change: transform;
}

/* تنويع ألوان المستطيلات */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(2),
.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(5) {
    background:
        linear-gradient(
            180deg,
            #a879ff 0%,
            #7449e8 52%,
            #4c28b8 100%
        ) !important;

    box-shadow:
        0 8px 0 #32147f,
        0 14px 24px rgba(0, 0, 0, 0.34),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.38),
        inset 0 -4px 5px
            rgba(32, 10, 86, 0.22) !important;
}

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(3),
.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(6) {
    background:
        linear-gradient(
            180deg,
            #45d9e8 0%,
            #169ebf 52%,
            #08728f 100%
        ) !important;

    box-shadow:
        0 8px 0 #075166,
        0 14px 24px rgba(0, 0, 0, 0.34),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.38),
        inset 0 -4px 5px
            rgba(3, 54, 69, 0.22) !important;
}
/* ==================================================
   إصلاح جاي بالغلط:
   شاشة كاملة + لون برتقالي موحد + حركة JS فقط
   ================================================== */

/* الشاشة الخارجية كاملة */

.pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

/* البطاقة الداخلية كاملة */

.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 14px 18px !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* صندوق جاي بالغلط يأخذ العرض كله */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-box {
    width: 100% !important;
    max-width: none !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
}

/* مساحة حركة الكلمات تملأ المساحة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    flex: 1 1 auto !important;
    min-height: 320px !important;

    margin: 8px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    display: block !important;
}

/* إيقاف حركة CSS القديمة نهائيًا */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word {
    animation: none !important;
    transition: none !important;

    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    /* لون برتقالي موحد */

    background:
        linear-gradient(
            180deg,
            #ffad67 0%,
            #ff7a3d 48%,
            #e74725 100%
        ) !important;

    border:
        3px solid
        rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 8px 0 #a62e18,
        0 14px 25px rgba(0, 0, 0, 0.32),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.4),
        inset 0 -4px 5px
            rgba(112, 21, 8, 0.2) !important;
}

/* إلغاء ألوان الكلمات المختلفة السابقة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(2),

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(3),

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(4),

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(5),

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-word:nth-child(6) {
    background:
        linear-gradient(
            180deg,
            #ffad67 0%,
            #ff7a3d 48%,
            #e74725 100%
        ) !important;

    box-shadow:
        0 8px 0 #a62e18,
        0 14px 25px rgba(0, 0, 0, 0.32),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.4),
        inset 0 -4px 5px
            rgba(112, 21, 8, 0.2) !important;
}
/* ==================================================
   صفحة إجابة جاي بالغلط في الشبكة
   ================================================== */

/* تصغير مساحة الحركة عند كشف الإجابة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-one-out-words.pg-hex-odd-answer-mode {
    position: relative !important;

    flex:
        0 0
        min(440px, 58dvh) !important;

    min-height:
        min(440px, 58dvh) !important;

    width: 100% !important;
    overflow: hidden !important;
}

/* جميع الكلمات تتحرك بسلاسة إلى أماكن الإجابة */

.pg-hex-odd-one-out-mode
.pg-hex-odd-answer-mode
.pg-hex-odd-one-out-word {
    animation: none !important;

    transition:
        top 0.75s ease,
        left 0.75s ease,
        right 0.75s ease,
        transform 0.75s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        opacity 0.45s ease !important;

    transform: none !important;
}

/* الكلمات المتشابهة — يمين */

.pg-hex-odd-one-out-mode
.pg-hex-odd-answer-mode
.pg-hex-odd-similar {
       left:
        calc(
            42% +
            var(--pg-odd-column) *
            29%
        ) !important;

    right: auto !important;

    top:
        calc(
            8% +
            var(--pg-odd-row) *
            30%
        ) !important;

    width: 25% !important;
    max-width: 25% !important;
    min-height: 62px !important;

    padding: 8px 12px !important;

    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #42df83 0%,
            #17b85b 50%,
            #07863c 100%
        ) !important;

    border-color:
        rgba(
            225,
            255,
            237,
            0.98
        ) !important;

    box-shadow:
        0 8px 0 #05632c,
        0 14px 24px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(38, 222, 118, 0.28),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.38) !important;
}

/* الكلمة الدخيلة — يسار */

.pg-hex-odd-one-out-mode
.pg-hex-odd-answer-mode
.pg-hex-odd-different {
    left: 10% !important;
    right: auto !important;
    top: 42% !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #ff6475 0%,
            #e72d48 50%,
            #ac102b 100%
        ) !important;

    border-color: #ffe268 !important;

    box-shadow:
        0 8px 0 #78091c,
        0 14px 24px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(255, 49, 79, 0.72),
        inset 0 4px 5px
            rgba(255, 255, 255, 0.36) !important;

    animation:
        pgHexOddAnswerPulse
        0.8s ease-in-out
        infinite alternate !important;
}

@keyframes pgHexOddAnswerPulse {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.18);
    }
}

/* صندوق الإجابة والسبب */

.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
   transform: translateY(-26px) !important;
    z-index: 20 !important;

    flex: 0 0 auto !important;

    width: min(850px, 94%) !important;
    min-height: 82px !important;

    margin: 10px auto 6px !important;
    padding: 11px 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(19, 87, 136, 0.98),
            rgba(8, 54, 104, 0.98)
        ) !important;

    border: 2px solid #42df83 !important;
    border-radius: 18px !important;

    box-shadow:
        0 8px 0 #053d78,
        0 13px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0
            rgba(255, 255, 255, 0.2) !important;
}

.pg-hex-odd-one-out-mode
.pg-hex-answer-area span {
    color: #7dffb2 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.pg-hex-odd-one-out-mode
#pg-hex-answer-text {
    color: #ffffff !important;
    font-size: clamp(19px, 2.2vw, 28px) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    text-align: center !important;
}

/* إبقاء أزرار التحكيم ظاهرة بوضوح */

.pg-hex-odd-one-out-mode
.pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 20 !important;

    flex: 0 0 auto !important;
    margin: 9px auto 5px !important;
}
/* إخفاء عنوان وتعليمات جاي بالغلط في صفحة الإجابة فقط */

.pg-hex-odd-one-out-box.pg-hex-odd-revealed
.pg-hex-odd-one-out-title,

.pg-hex-odd-one-out-box.pg-hex-odd-revealed
.pg-hex-odd-one-out-instruction {
    display: none !important;
}

/* الاستفادة من المساحة الفارغة */

.pg-hex-odd-one-out-box.pg-hex-odd-revealed
.pg-hex-odd-one-out-words {
    margin-top: 0 !important;
}
/* ==================================================
   دائرة مؤقت الشبكة المتناقصة
   ================================================== */

#pg-hex-question-overlay
#pg-hex-question-timer {
    --pg-hex-time-progress: 360deg;

    border: 0 !important;

    background:
        radial-gradient(
            circle,
            #071f55 0%,
            #071f55 56%,
            transparent 58%
        ),
        conic-gradient(
            from 0deg,
            #ff963f 0deg,
            #ff963f
                var(--pg-hex-time-progress),
            rgba(255, 255, 255, 0.16)
                var(--pg-hex-time-progress),
            rgba(255, 255, 255, 0.16)
                360deg
        ) !important;

    box-shadow:
        0 7px 0 #031336,
        0 12px 22px rgba(0, 0, 0, 0.32),
        0 0 22px rgba(255, 150, 63, 0.38) !important;
}

/* آخر خمس ثوانٍ — أحمر */

#pg-hex-question-overlay
#pg-hex-question-timer.pg-hex-timer-warning {
    color: #ffffff !important;

    background:
        radial-gradient(
            circle,
            #7c0d20 0%,
            #7c0d20 56%,
            transparent 58%
        ),
        conic-gradient(
            from 0deg,
            #ff3e55 0deg,
            #ff3e55
                var(--pg-hex-time-progress),
            rgba(255, 255, 255, 0.14)
                var(--pg-hex-time-progress),
            rgba(255, 255, 255, 0.14)
                360deg
        ) !important;

    box-shadow:
        0 7px 0 #520817,
        0 0 28px rgba(255, 45, 72, 0.7) !important;

    animation:
        pgHexFinalSecondsPulse
        0.55s ease-in-out
        infinite alternate !important;
}

@keyframes pgHexFinalSecondsPulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

/* ==================================================
   زوم الشبكة — اسم الفريق تحت المؤقت
   ================================================== */

#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-cell-number {
    display: none !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-header {
    position: absolute !important;
    z-index: 100 !important;

    top: 120px !important;
    left: 50% !important;
    right: auto !important;

    width: max-content !important;
    margin: 0 !important;

    display: block !important;

    transform: translateX(-50%) !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-team-name {
    display: block !important;

    min-width: 130px !important;
    padding: 7px 16px !important;

    color: #ffffff !important;
    background: #174b99 !important;

    border: 2px solid #74c9ff !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 0 #08265e,
        0 0 15px rgba(72, 190, 255, 0.28) !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-timer {
    margin:
        0 auto 58px !important;
}

/* ==================================================
   زوم الشبكة — الصورتان جنبًا إلى جنب بعد إظهار الإجابة
   ================================================== */

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
) {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    column-gap: 22px !important;
   align-items: start !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-header,

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-text {
    grid-column: 1 / -1 !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-image {
    grid-column: 1 !important;

    width: 100% !important;
    max-width: 360px !important;
    height: 240px !important;
    max-height: 240px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area {
    grid-column: 2 !important;

    width: 100% !important;
    margin: 0 !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-answer-image:not(.pg-hex-hidden) {
    width: 100% !important;
    max-width: 360px !important;
    height: 240px !important;
    max-height: 240px !important;

    margin: 0 auto 8px !important;
    object-fit: contain !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-judgement-buttons {
    grid-column: 1 / -1 !important;
}

/* ==================================================
   زوم الشبكة — شاشة كاملة
   ================================================== */

#pg-hex-question-overlay.pg-hex-zoom-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card {
    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 26px 42px !important;

    border-radius: 0 !important;

        box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ==================================================
   زوم الشبكة — إخفاء وسائل المساعدة
   ================================================== */

body:has(
    #pg-hex-question-overlay.pg-hex-zoom-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team1-helps,

body:has(
    #pg-hex-question-overlay.pg-hex-zoom-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team2-helps {
    display: none !important;
}

/* إخفاء اسم الفريق عند ظهور إجابة زوم الشبكة */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
div.pg-hex-question-header {
    display: none !important;
    visibility: hidden !important;
}

/* ==================================================
   تصميم إجابة زوم الجديد — تنظيف الشكل القديم
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

       box-shadow: none !important;
    backdrop-filter: none !important;
}

/* ==================================================
   تصميم إجابة زوم الجديد — بطاقتا الصور
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-image {
    width: min(410px, 38vw) !important;
    height: min(310px, 42dvh) !important;

    padding: 8px !important;
    margin: 0 auto !important;

    object-fit: contain !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 28, 69, 0.96),
            rgba(7, 16, 47, 0.98)
        ) !important;

    border: 3px solid #ff9b42 !important;
    border-radius: 22px !important;

    box-shadow:
        0 12px 0 rgba(137, 62, 10, 0.72),
        0 22px 38px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(255, 145, 55, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-image {
    width: min(410px, 38vw) !important;
    height: min(310px, 42dvh) !important;

    padding: 8px !important;
    margin: 0 auto 14px !important;

    object-fit: contain !important;

    background:
        linear-gradient(
            145deg,
            rgba(12, 54, 54, 0.96),
            rgba(5, 29, 37, 0.98)
        ) !important;

    border: 3px solid #46ef9a !important;
    border-radius: 22px !important;

    box-shadow:
        0 12px 0 rgba(4, 105, 61, 0.74),
        0 22px 38px rgba(0, 0, 0, 0.38),
               0 0 30px rgba(55, 235, 145, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* ==================================================
   تصميم إجابة زوم الجديد — عنوان الكشف
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    grid-column: 1 / -1 !important;

    min-height: 0 !important;
    margin: 0 auto 18px !important;

    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-text::after {
    content: "🔍 تم كشف الصورة" !important;

    display: inline-block !important;

    padding: 10px 28px !important;

    color: #ffffff !important;
    font-size: clamp(24px, 2.5vw, 38px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    background:
        linear-gradient(
            90deg,
            rgba(25, 101, 189, 0.92),
            rgba(104, 47, 183, 0.92)
        ) !important;

    border: 2px solid rgba(118, 211, 255, 0.88) !important;
    border-radius: 999px !important;

    box-shadow:
        0 8px 0 rgba(6, 34, 91, 0.85),
        0 0 28px rgba(91, 190, 255, 0.30) !important;

    animation:
        pgHexZoomRevealTitle
        0.65s ease both !important;
}

@keyframes pgHexZoomRevealTitle {
    from {
        opacity: 0;
        transform:
            translateY(-20px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ==================================================
   تصميم إجابة زوم الجديد — بطاقة الإجابة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area span {
    display: block !important;

    margin: 3px 0 2px !important;
    padding: 0 !important;

    color: #67f5ad !important;
    font-size: 14px !important;
    font-weight: 800 !important;

    background: transparent !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-text {
    position: relative !important;

    display: inline-block !important;

    min-width: 230px !important;
    margin: 0 !important;
    padding: 8px 24px !important;

    color: #ffffff !important;
    font-size: clamp(23px, 2.3vw, 34px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 128, 77, 0.96),
            rgba(6, 74, 51, 0.98)
        ) !important;

    border: 2px solid #68f5ae !important;
    border-radius: 16px !important;

    box-shadow:
        0 7px 0 #03452e,
        0 0 24px rgba(69, 240, 157, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

    animation:
        pgHexZoomAnswerPop
        0.7s 0.2s ease both !important;
}

@keyframes pgHexZoomAnswerPop {
    from {
        opacity: 0;
        transform:
            translateY(14px)
            scale(0.86);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ==================================================
   تصميم إجابة زوم الجديد — سهم الكشف
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-card::before {
    content: "←" !important;

    position: absolute !important;
    z-index: 120 !important;

    top: 48% !important;
    left: 50% !important;

    display: grid !important;
    place-items: center !important;

    width: 70px !important;
    height: 54px !important;

    color: #fff4a8 !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    background:
        radial-gradient(
            circle,
            rgba(80, 182, 255, 0.34),
            rgba(65, 83, 205, 0.12) 58%,
            transparent 72%
        ) !important;

    filter:
        drop-shadow(
            0 0 9px
            rgba(92, 211, 255, 0.95)
        ) !important;

    transform:
        translate(-50%, -50%) !important;

    animation:
        pgHexZoomArrowMove
        0.85s ease-in-out
        infinite alternate !important;

    pointer-events: none !important;
}

@keyframes pgHexZoomArrowMove {
    from {
        opacity: 0.55;

        transform:
            translate(-42%, -50%)
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            translate(-62%, -50%)
            scale(1.12);
    }
}

/* ==================================================
   تصميم إجابة زوم الجديد — أزرار التحكيم
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons {
    grid-column: 1 / -1 !important;

    width: min(650px, 72vw) !important;

    margin: 18px auto 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 18px !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons button {
    min-height: 58px !important;

    padding: 10px 18px !important;

    font-size: 19px !important;
    font-weight: 900 !important;

    border-radius: 15px !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons button:hover {
    transform:
        translateY(-3px)
        scale(1.025) !important;

    filter: brightness(1.12) !important;
}
/* ==================================================
   تصميم إجابة زوم الجديد — خلفية مسرح احترافية
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
) {
    background:
        radial-gradient(
            circle at 18% 30%,
            rgba(44, 205, 255, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 68%,
            rgba(153, 75, 255, 0.25),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(255, 137, 54, 0.14),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #02091d 0%,
            #071b49 42%,
            #17104d 72%,
            #04081c 100%
        ) !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-card {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            rgba(5, 28, 72, 0.74),
            rgba(27, 15, 79, 0.70)
        ) !important;

    background-size:
        38px 38px,
        38px 38px,
        auto !important;

    border: 0 !important;

    box-shadow:
        inset 0 0 90px rgba(0, 0, 0, 0.24) !important;
}
/* ==================================================
   تصميم إجابة زوم الجديد — حركة دخول الصورتين
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-image {
    animation:
        pgHexZoomImageEnter
        0.7s ease both !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-image {
    animation:
        pgHexFullImageEnter
        0.75s 0.12s ease both !important;
}

@keyframes pgHexZoomImageEnter {
    from {
        opacity: 0;
        transform:
            translateX(70px)
            scale(1.08);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes pgHexFullImageEnter {
    from {
        opacity: 0;
        transform:
            translateX(-70px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}
/* ==================================================
   سؤال زوم الشبكة — المؤقت واسم الفريق يسارًا
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-timer {
    position: absolute !important;
    z-index: 150 !important;

    top: 35px !important;
    left: 80px !important;
    right: auto !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
.pg-hex-question-header {
    position: absolute !important;
    z-index: 150 !important;

    top: 130px !important;
    left: 65px !important;
    right: auto !important;

    width: 112px !important;
    margin: 0 !important;

    display: block !important;

    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-team-name {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 7px 5px !important;

    box-sizing: border-box !important;
    text-align: center !important;
}
/* ==================================================
   سؤال زوم الشبكة — خلفية مسابقات حديثة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
) {
    isolation: isolate !important;

    background-color: #03091e !important;

    background-image:
        radial-gradient(
            circle at 13% 20%,
            rgba(43, 202, 255, 0.27) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 78%,
            rgba(157, 73, 255, 0.30) 0%,
            transparent 31%
        ),
        radial-gradient(
            circle at 70% 10%,
            rgba(255, 137, 53, 0.15) 0%,
            transparent 23%
        ),
        linear-gradient(
            120deg,
            transparent 0%,
            transparent 42%,
            rgba(69, 179, 255, 0.08) 48%,
            transparent 54%,
            transparent 100%
        ),
        linear-gradient(
            145deg,
            #02091d 0%,
            #071b48 40%,
            #17104c 72%,
            #04081c 100%
        ) !important;

    overflow: hidden !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
.pg-hex-question-card {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 50% 45%,
            rgba(31, 141, 225, 0.16),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(3, 18, 54, 0.74),
            rgba(23, 14, 73, 0.68)
        ) !important;

    background-size:
        42px 42px,
        42px 42px,
        auto,
        auto !important;

    border: 0 !important;

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.28) !important;
}
/* ==================================================
   سؤال زوم الشبكة — منصة صورة الزوم
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-image {
    position: relative !important;

    width: min(560px, 58vw) !important;
    height: min(380px, 50dvh) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 12px auto 20px !important;
    padding: 11px !important;

    object-fit: contain !important;
    object-position: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(12, 31, 76, 0.98),
            rgba(21, 15, 68, 0.98)
        ) !important;

    border: 3px solid #ff9a43 !important;
    border-radius: 26px !important;

    box-shadow:
        0 11px 0 #833c13,
        0 24px 48px rgba(0, 0, 0, 0.42),
        0 0 0 7px rgba(255, 146, 61, 0.08),
        0 0 34px rgba(255, 145, 55, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;

    animation:
        pgHexZoomQuestionImageFloat
        3.2s ease-in-out
        infinite alternate !important;
}

@keyframes pgHexZoomQuestionImageFloat {
    from {
        transform:
            translateY(0)
            scale(1);
    }

    to {
        transform:
            translateY(-7px)
            scale(1.012);
    }
}
/* ==================================================
   سؤال زوم الشبكة — عنوان احترافي
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-text {
    position: relative !important;
    z-index: 20 !important;

    width: max-content !important;
    max-width: 70vw !important;
    min-height: 0 !important;

    margin: 14px auto 8px !important;
    padding: 11px 34px !important;

    color: #ffffff !important;
    font-size: clamp(25px, 2.6vw, 39px) !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    text-align: center !important;

    background:
        linear-gradient(
            90deg,
            rgba(23, 101, 194, 0.94),
            rgba(83, 58, 186, 0.94)
        ) !important;

    border: 2px solid rgba(112, 207, 255, 0.90) !important;
    border-radius: 999px !important;

    box-shadow:
        0 8px 0 rgba(5, 36, 98, 0.90),
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(71, 181, 255, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;

    text-shadow:
        0 3px 7px rgba(0, 0, 0, 0.38) !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-text::before {
    content: "🔍" !important;

    display: inline-block !important;
    margin-left: 11px !important;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255, 218, 85, 0.75)
        ) !important;

    animation:
        pgHexZoomLensPulse
        1.4s ease-in-out
        infinite alternate !important;
}

@keyframes pgHexZoomLensPulse {
    from {
        transform:
            rotate(-8deg)
            scale(0.94);
    }

    to {
        transform:
            rotate(7deg)
            scale(1.10);
    }
}

/* ==================================================
   سؤال زوم الشبكة — الجزيئات واللمعات
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)::before {
    content: "" !important;

    position: fixed !important;
    z-index: 0 !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 224, 101, 0.92) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(82, 207, 255, 0.82) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(198, 124, 255, 0.74) 0 1.5px,
            transparent 2.5px
        ),
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.62) 0 1px,
            transparent 2px
        ) !important;

    background-size:
        210px 180px,
        250px 220px,
        175px 245px,
        125px 140px !important;

    background-position:
        20px 30px,
        85px 115px,
        42px 72px,
        8px 16px !important;

    opacity: 0.72 !important;

    filter:
        brightness(1.25)
        drop-shadow(
            0 0 5px
            rgba(87, 205, 255, 0.72)
        ) !important;

    animation:
        pgHexZoomQuestionParticles
        14s linear infinite !important;

    pointer-events: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
.pg-hex-question-card {
    position: relative !important;
    z-index: 2 !important;
}

@keyframes pgHexZoomQuestionParticles {
    0% {
        background-position:
            20px 30px,
            85px 115px,
            42px 72px,
            8px 16px;

        opacity: 0.48;
    }

    50% {
        opacity: 0.95;

        filter:
            brightness(1.9)
            drop-shadow(
                0 0 8px
                rgba(255, 222, 91, 0.92)
            );
    }

    100% {
        background-position:
            230px 210px,
            -165px 335px,
            217px -173px,
            133px 156px;

        opacity: 0.48;
    }
}
/* ==================================================
   سؤال زوم الشبكة — زر إظهار الإجابة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-show-answer {
    position: relative !important;
    z-index: 30 !important;

    min-width: 245px !important;
    min-height: 62px !important;

    margin: 26px auto 0 !important;
    padding: 11px 28px !important;

    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            180deg,
            #ffad4d 0%,
            #f17827 52%,
            #bd3f17 100%
        ) !important;

    border: 2px solid #ffe19a !important;
    border-radius: 17px !important;

    box-shadow:
        0 8px 0 #7e2510,
        0 15px 28px rgba(0, 0, 0, 0.32),
        0 0 26px rgba(255, 136, 50, 0.40),
        inset 0 2px 0 rgba(255, 255, 255, 0.36) !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.36) !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-show-answer:hover {
    transform:
        translateY(-4px)
        scale(1.035) !important;

    filter: brightness(1.12) !important;

    box-shadow:
        0 12px 0 #7e2510,
        0 20px 34px rgba(0, 0, 0, 0.36),
        0 0 38px rgba(255, 153, 62, 0.62) !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-show-answer:active {
    transform:
        translateY(5px)
        scale(0.98) !important;

    box-shadow:
        0 3px 0 #7e2510,
        0 8px 16px rgba(0, 0, 0, 0.30) !important;
}
/* ==================================================
   شوف وركّز في الشبكة — شاشة كاملة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card {
    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 26px 42px !important;

    border-radius: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* ==================================================
   شوف وركّز في الشبكة — إخفاء وسائل المساعدة
   ================================================== */

body:has(
    #pg-hex-question-overlay.pg-hex-focus-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team1-helps,

body:has(
    #pg-hex-question-overlay.pg-hex-focus-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team2-helps {
    display: none !important;
}

/* ==================================================
   شوف وركّز في الشبكة — المؤقت واسم الفريق يسارًا
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-timer {
    position: absolute !important;
    z-index: 150 !important;

    top: 35px !important;
    left: 80px !important;
    right: auto !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-header {
    position: absolute !important;
    z-index: 150 !important;

    top: 130px !important;
    left: 65px !important;
    right: auto !important;

    width: 112px !important;
    margin: 0 !important;

    display: block !important;

    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-cell-number {
    display: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-team-name {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 7px 5px !important;

    color: #ffffff !important;
    text-align: center !important;

    background: #174b99 !important;

    border: 2px solid #74c9ff !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 0 #08265e,
        0 0 15px rgba(72, 190, 255, 0.28) !important;

    box-sizing: border-box !important;
}
/* ==================================================
   شوف وركّز — إخفاء السؤال أثناء عرض الفيديو
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-question-video:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    display: none !important;
}
/* ==================================================
   شوف وركّز في الشبكة — فيديو بحجم الشاشة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-video:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 40 !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(1120px, 86vw) !important;
    height: min(650px, 78dvh) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    background: #020611 !important;

    border: 3px solid #55c7ff !important;
    border-radius: 22px !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 0 7px rgba(67, 187, 255, 0.08),
        0 0 34px rgba(62, 191, 255, 0.34) !important;

    transform:
        translate(-50%, -50%) !important;
}
/* ==================================================
   شوف وركّز في الشبكة — الخلفية المرحة الجديدة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode {
    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(255, 190, 64, 0.22) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(96, 238, 205, 0.20) 0 8%,
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 12%,
            rgba(255, 104, 178, 0.18) 0 5%,
            transparent 23%
        ),
        linear-gradient(
            145deg,
            #071538 0%,
            #122d68 46%,
            #311e70 100%
        ) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.01)
        ) !important;

    border: 0 !important;
    box-shadow:
        inset 0 0 80px rgba(66, 190, 255, 0.08) !important;
}

/* دوائر مضيئة متحركة في الخلفية */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::before,
html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::after {
    content: "" !important;

    position: absolute !important;
    z-index: -1 !important;

    width: 310px !important;
    height: 310px !important;

    border: 2px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 42% 58% 62% 38% !important;

    pointer-events: none !important;

    animation:
        pgHexFocusBackgroundFloat
        8s ease-in-out infinite alternate !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::before {
    top: -105px !important;
    right: -70px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 93, 174, 0.22),
            rgba(255, 183, 59, 0.08)
        ) !important;

    box-shadow:
        0 0 70px rgba(255, 93, 174, 0.20) !important;

    transform: rotate(18deg) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::after {
    bottom: -135px !important;
    left: -65px !important;

    background:
        linear-gradient(
            145deg,
            rgba(68, 226, 205, 0.20),
            rgba(55, 147, 255, 0.10)
        ) !important;

    box-shadow:
        0 0 75px rgba(68, 226, 205, 0.18) !important;

    animation-delay: -3s !important;
}

@keyframes pgHexFocusBackgroundFloat {
    from {
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
    }

    to {
        translate: 24px 18px;
        rotate: 15deg;
        scale: 1.08;
    }
}

/* ==================================================
   شوف وركّز في الشبكة — تصميم صفحة السؤال
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-text {
    position: relative !important;
    z-index: 20 !important;

    width: min(820px, 76vw) !important;
    min-height: 170px !important;

    margin: 21vh auto 30px !important;
    padding: 72px 55px 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: clamp(25px, 3vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 53, 119, 0.96),
            rgba(48, 30, 113, 0.96)
        ) !important;

    border: 3px solid rgba(117, 216, 255, 0.88) !important;
    border-radius: 30px !important;

    box-shadow:
        0 12px 0 #071a4b,
        0 25px 55px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 38px rgba(80, 194, 255, 0.23) !important;

    text-shadow:
        0 3px 8px rgba(0, 0, 0, 0.35) !important;

    animation:
        pgHexFocusQuestionEntrance
        0.55s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

/* الشريط المرح أعلى بطاقة السؤال */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-text::before {
    content: "🎬 شوف وركّز" !important;

    position: absolute !important;

    top: -25px !important;
    left: 50% !important;

    padding: 10px 32px !important;

    color: #102454 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background:
        linear-gradient(
            180deg,
            #fff27b,
            #ffbd38
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 999px !important;

    box-shadow:
        0 7px 0 #b96c0b,
        0 13px 24px rgba(0, 0, 0, 0.30) !important;

    transform: translateX(-50%) rotate(-1deg) !important;
}

/* زر إظهار الإجابة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    min-width: 290px !important;
    min-height: 64px !important;

    margin: 12px auto !important;
    padding: 12px 32px !important;

    display: block !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 21px !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            180deg,
            #ff6cae,
            #e43788
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 20px !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 0 #8c1956,
        0 16px 30px rgba(228, 55, 136, 0.34),
        0 0 26px rgba(255, 108, 174, 0.23) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    filter: brightness(1.1) !important;

    transform:
        translateY(-4px)
        scale(1.025) !important;

    box-shadow:
        0 12px 0 #8c1956,
        0 21px 36px rgba(228, 55, 136, 0.42) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform: translateY(6px) !important;

    box-shadow:
        0 2px 0 #8c1956,
        0 7px 15px rgba(0, 0, 0, 0.28) !important;
}

@keyframes pgHexFocusQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==================================================
   شوف وركّز في الشبكة — تصميم صفحة الإجابة
   ================================================== */

/* إخفاء السؤال بعد كشف الإجابة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    display: none !important;
}

/* بطاقة الإجابة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    width: min(760px, 76vw) !important;
    min-height: 190px !important;

    margin: 17vh auto 20px !important;
    padding: 65px 42px 30px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(14, 100, 91, 0.97),
            rgba(14, 61, 102, 0.97)
        ) !important;

    border: 3px solid #7dffe0 !important;
    border-radius: 30px !important;

    box-shadow:
        0 12px 0 #073f4d,
        0 25px 55px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 42px rgba(77, 255, 209, 0.25) !important;

    animation:
        pgHexFocusAnswerEntrance
        0.55s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

/* عنوان بطاقة الإجابة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden)
> span {
    position: absolute !important;

    top: -25px !important;
    left: 50% !important;

    padding: 10px 34px !important;

    color: #104837 !important;
    font-family: Cairo, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background:
        linear-gradient(
            180deg,
            #adff9c,
            #51e6a0
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 999px !important;

    box-shadow:
        0 7px 0 #168361,
        0 13px 24px rgba(0, 0, 0, 0.30) !important;

    transform:
        translateX(-50%)
        rotate(1deg) !important;
}

/* نص الإجابة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-answer-text {
    color: #ffffff !important;

    font-family: Cairo, sans-serif !important;
    font-size: clamp(29px, 3.5vw, 46px) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: center !important;

    text-shadow:
        0 4px 10px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(125, 255, 224, 0.25) !important;
}

/* زر إعادة تشغيل الفيديو */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-replay-button:not(.pg-hex-hidden) {
    min-width: 310px !important;
    min-height: 58px !important;

    margin: 7px auto 0 !important;
    padding: 11px 28px !important;

    display: block !important;

    color: #112c63 !important;
    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            180deg,
            #fff381,
            #ffbd38
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 18px !important;

    cursor: pointer !important;

    box-shadow:
        0 7px 0 #b76c0b,
        0 14px 25px rgba(0, 0, 0, 0.28) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-replay-button:not(.pg-hex-hidden):hover {
    filter: brightness(1.08) !important;

    transform:
        translateY(-3px)
        scale(1.02) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-replay-button:not(.pg-hex-hidden):active {
    transform: translateY(5px) !important;
    box-shadow:
        0 2px 0 #b76c0b,
        0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* أزرار التحكيم */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    width: min(650px, 72vw) !important;

    margin: 18px auto 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(220px, 1fr)) !important;
    gap: 22px !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-judgement-buttons button {
    min-height: 62px !important;
    padding: 12px 24px !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    border: 3px solid #ffffff !important;
    border-radius: 19px !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-correct-button {
    background:
        linear-gradient(
            180deg,
            #32dd83,
            #169b59
        ) !important;

    box-shadow:
        0 8px 0 #08693b,
        0 15px 25px rgba(22, 155, 89, 0.30) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-wrong-button {
    background:
        linear-gradient(
            180deg,
            #ff6868,
            #d62f48
        ) !important;

    box-shadow:
        0 8px 0 #841c30,
        0 15px 25px rgba(214, 47, 72, 0.30) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-judgement-buttons button:hover {
    filter: brightness(1.1) !important;

    transform:
        translateY(-3px)
        scale(1.02) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-judgement-buttons button:active {
    transform: translateY(6px) !important;
    box-shadow: none !important;
}

@keyframes pgHexFocusAnswerEntrance {
    from {
        opacity: 0;
        transform:
            translateY(32px)
            scale(0.90)
            rotate(-1deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}
/* ==================================================
   شوف وركّز في الشبكة — وضع إعادة مشاهدة الفيديو
   ================================================== */

/* إخفاء الإجابة والتحكيم أثناء عرض الفيديو */

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-question-video:not(.pg-hex-hidden)
)
#pg-hex-answer-area,

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-question-video:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons,

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-question-video:not(.pg-hex-hidden)
)
#pg-hex-show-answer {
    display: none !important;
}

/* إطار سينمائي أكثر جمالًا للفيديو */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-video:not(.pg-hex-hidden) {
    outline:
        1px solid rgba(255, 255, 255, 0.35) !important;
    outline-offset: 7px !important;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.62),
        0 0 0 8px rgba(73, 194, 255, 0.10),
        0 0 48px rgba(73, 194, 255, 0.42),
        0 0 95px rgba(170, 85, 255, 0.18) !important;

    animation:
        pgHexFocusVideoEntrance
        0.45s cubic-bezier(.2, .85, .3, 1.1) both !important;
}

/* تعتيم هادئ خلف الفيديو */

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-question-video:not(.pg-hex-hidden)
)
.pg-hex-question-card {
    background:
        radial-gradient(
            circle at center,
            rgba(26, 66, 139, 0.42),
            rgba(2, 7, 24, 0.78)
        ) !important;
}

@keyframes pgHexFocusVideoEntrance {
    from {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.90) !important;
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1) !important;
    }
}
/* ==================================================
   شوف وركّز في الشبكة — ضبط الشاشات القصيرة والصغيرة
   ================================================== */

@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-question-text {
        min-height: 135px !important;

        margin-top: 16vh !important;
        margin-bottom: 20px !important;

        padding:
            55px 42px 25px !important;

        font-size:
            clamp(22px, 2.6vw, 34px) !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        min-height: 150px !important;

        margin-top: 12vh !important;
        margin-bottom: 12px !important;

        padding:
            51px 32px 20px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-answer-text {
        font-size:
            clamp(25px, 3vw, 38px) !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-focus-replay-button:not(.pg-hex-hidden) {
        min-height: 50px !important;
        margin-top: 2px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        margin-top: 12px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-judgement-buttons button {
        min-height: 52px !important;
    }
}

@media (max-width: 700px) {
    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    .pg-hex-question-card {
        padding:
            22px 16px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-question-text,
    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        width: 92vw !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-question-text {
        padding:
            62px 25px 30px !important;

        font-size:
            clamp(22px, 6vw, 31px) !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-question-timer {
        top: 18px !important;
        left: 22px !important;

        width: 68px !important;
        height: 68px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    .pg-hex-question-header {
        top: 94px !important;
        left: 12px !important;

        width: 90px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-focus-replay-button:not(.pg-hex-hidden) {
        min-width: 0 !important;
        width: 92% !important;

        font-size: 16px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        width: 88vw !important;

        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-focus-mode
    #pg-hex-question-video:not(.pg-hex-hidden) {
        width: 90vw !important;
        height: 68dvh !important;
    }
}
/* ==================================================
   شوف وركّز في الشبكة — تنزيل صفحة الإجابة
   وإخفاء اسم الفريق منها
   ================================================== */

/* إخفاء اسم الفريق في صفحة الإجابة فقط */

html body
#pg-hex-question-overlay.pg-hex-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-question-header {
    display: none !important;
}

/* تنزيل بطاقة الإجابة، وما تحتها ينزل معها تلقائيًا */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    margin-top:
        calc(17vh + 55px) !important;
}
/* ==================================================
   شوف وركّز في الشبكة — زر تشغيل الفيديو الكبير
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-play-button:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 100 !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    min-width: 300px !important;
    min-height: 92px !important;

    margin: 0 !important;
    padding: 17px 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 25px !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            180deg,
            #ffad3d 0%,
            #ff7a18 58%,
            #e9520b 100%
        ) !important;

    border: 4px solid #ffffff !important;
    border-radius: 25px !important;

    cursor: pointer !important;

    box-shadow:
        0 11px 0 #9e3405,
        0 22px 45px rgba(0, 0, 0, 0.48),
        0 0 42px rgba(255, 132, 29, 0.58),
        inset 0 2px 0 rgba(255, 255, 255, 0.38) !important;

    text-shadow:
        0 3px 6px rgba(90, 26, 0, 0.48) !important;

    transform:
        translate(-50%, -50%) !important;

    transition:
        filter 0.18s ease,
        box-shadow 0.18s ease !important;

    animation:
        pgHexFocusPlayPulse
        1.7s ease-in-out infinite !important;
}

/* دائرة علامة التشغيل */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-play-button
> span {
    width: 48px !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding-right: 3px !important;

    color: #f2640b !important;
    font-size: 25px !important;

    background: #ffffff !important;
    border-radius: 50% !important;

    box-shadow:
        0 4px 0 #ffc18e,
        0 7px 14px rgba(0, 0, 0, 0.22) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-play-button:not(.pg-hex-hidden):hover {
    filter: brightness(1.09) !important;

    box-shadow:
        0 13px 0 #9e3405,
        0 26px 50px rgba(0, 0, 0, 0.52),
        0 0 58px rgba(255, 144, 40, 0.76) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-play-button:not(.pg-hex-hidden):active {
    animation: none !important;

    transform:
        translate(-50%, calc(-50% + 8px))
        scale(0.98) !important;

    box-shadow:
        0 3px 0 #9e3405,
        0 10px 20px rgba(0, 0, 0, 0.36) !important;
}

@keyframes pgHexFocusPlayPulse {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.045);

        box-shadow:
            0 11px 0 #9e3405,
            0 22px 45px rgba(0, 0, 0, 0.48),
            0 0 62px rgba(255, 144, 40, 0.78);
    }
}
/* ==================================================
   شوف وركّز في الشبكة — زر إغلاق فيديو المراجعة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-video-close:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 120 !important;

    top:
        calc(
            50% - min(325px, 39dvh) + 15px
        ) !important;

    right:
        calc(
            50% - min(560px, 43vw) + 15px
        ) !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    background:
        linear-gradient(
            180deg,
            #ff6464,
            #d92d45
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 50% !important;

    cursor: pointer !important;

    box-shadow:
        0 7px 0 #86192d,
        0 14px 28px rgba(0, 0, 0, 0.48),
        0 0 25px rgba(255, 75, 96, 0.48) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;

    animation:
        pgHexFocusCloseEntrance
        0.35s ease-out both !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-video-close:not(.pg-hex-hidden):hover {
    filter: brightness(1.12) !important;

    transform:
        translateY(-3px)
        rotate(6deg)
        scale(1.08) !important;

    box-shadow:
        0 10px 0 #86192d,
        0 18px 32px rgba(0, 0, 0, 0.52),
        0 0 34px rgba(255, 75, 96, 0.66) !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-focus-video-close:not(.pg-hex-hidden):active {
    transform:
        translateY(5px)
        scale(0.96) !important;

    box-shadow:
        0 2px 0 #86192d,
        0 7px 14px rgba(0, 0, 0, 0.36) !important;
}

@keyframes pgHexFocusCloseEntrance {
    from {
        opacity: 0;
        transform:
            scale(0.55)
            rotate(-25deg);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
    }
}
/* ==================================================
   اسمع وركّز في الشبكة — إخفاء وسائل المساعدة
   ================================================== */

body:has(
    #pg-hex-question-overlay.pg-hex-listen-focus-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team1-helps,

body:has(
    #pg-hex-question-overlay.pg-hex-listen-focus-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team2-helps {
    display: none !important;
}
/* ==================================================
   اسمع وركّز في الشبكة — تنظيف صفحة الصوت الأولى
   ================================================== */

/* إخفاء رقم الخلية دائمًا في اسمع وركّز */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* أثناء ظهور مشغل الصوت نخفي السؤال وزر الإجابة والمؤقت */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-audio-box:not(.pg-hex-hidden)
)
#pg-hex-question-text,

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-audio-box:not(.pg-hex-hidden)
)
#pg-hex-show-answer,

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-audio-box:not(.pg-hex-hidden)
)
#pg-hex-question-timer {
    display: none !important;
}
/* ==================================================
   اسمع وركّز في الشبكة — صفحة الإجابة فقط
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text,

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-audio-box,

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer {
    display: none !important;
}
/* ==================================================
   اسمع وركّز في الشبكة — الشاشة والخلفية الجديدة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 13% 20%,
            rgba(255, 199, 68, 0.22) 0 6%,
            transparent 23%
        ),
        radial-gradient(
            circle at 87% 18%,
            rgba(91, 235, 211, 0.20) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 84%,
            rgba(190, 91, 255, 0.24) 0 8%,
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #07183b 0%,
            #103c78 46%,
            #4a237b 100%
        ) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 28px 42px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 48px,
            rgba(255, 255, 255, 0.026) 49px 51px
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.008)
        ) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 0 95px rgba(61, 215, 255, 0.09) !important;
}

/* موجتان زخرفيتان في الخلفية */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-card::before,

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-card::after {
    content: "♫  ♪  ♫" !important;

    position: absolute !important;
    z-index: -1 !important;

    color: rgba(255, 255, 255, 0.09) !important;

    font-family: Arial, sans-serif !important;
    font-size: 75px !important;
    font-weight: 900 !important;
    letter-spacing: 24px !important;
    white-space: nowrap !important;

    pointer-events: none !important;

    animation:
        pgHexListenNotesFloat
        7s ease-in-out infinite alternate !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-card::before {
    top: 10% !important;
    right: 4% !important;

    color: rgba(255, 211, 78, 0.13) !important;

    transform: rotate(-10deg) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-card::after {
    bottom: 7% !important;
    left: 3% !important;

    color: rgba(79, 238, 218, 0.12) !important;

    animation-delay: -3s !important;
    transform: rotate(8deg) !important;
}

@keyframes pgHexListenNotesFloat {
    from {
        translate: 0 0;
        scale: 0.96;
    }

    to {
        translate: 22px -18px;
        scale: 1.05;
    }
}
/* ==================================================
   اسمع وركّز في الشبكة — تصميم صفحة تشغيل الصوت
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-audio-box:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    width: min(680px, 72vw) !important;
    min-height: 245px !important;

    margin: 20vh auto 0 !important;
    padding: 92px 48px 35px !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    color: #ffffff !important;
    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(11, 76, 132, 0.97),
            rgba(58, 33, 121, 0.97)
        ) !important;

    border: 3px solid #74e9ff !important;
    border-radius: 32px !important;

    box-shadow:
        0 13px 0 #071d55,
        0 28px 60px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 0 44px rgba(84, 220, 255, 0.28) !important;

    animation:
        pgHexListenCardEntrance
        0.55s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

/* أيقونة السماعة أعلى البطاقة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-audio-box:not(.pg-hex-hidden)::before {
    content: "🎧" !important;

    position: absolute !important;

    top: -60px !important;
    left: 50% !important;

    width: 116px !important;
    height: 116px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 61px !important;

    background:
        linear-gradient(
            145deg,
            #fff37d,
            #ffad32
        ) !important;

    border: 4px solid #ffffff !important;
    border-radius: 50% !important;

    box-shadow:
        0 9px 0 #b46609,
        0 18px 32px rgba(0, 0, 0, 0.34),
        0 0 36px rgba(255, 194, 58, 0.52) !important;

    transform: translateX(-50%) !important;

    animation:
        pgHexListenHeadphonePulse
        1.8s ease-in-out infinite !important;
}

/* عنوان الاستماع */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-audio-box
> p {
    margin: 0 0 26px !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: clamp(23px, 2.5vw, 32px) !important;
    font-weight: 900 !important;

    text-shadow:
        0 4px 9px rgba(0, 0, 0, 0.34) !important;
}

/* مشغل الصوت */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-audio {
    display: block !important;

    width: min(540px, 100%) !important;
    height: 58px !important;

    margin: 0 auto !important;

    accent-color: #ff9b32 !important;

    border: 3px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 999px !important;

    background: #f4f8ff !important;

    box-shadow:
        0 7px 0 #0a306d,
        0 14px 27px rgba(0, 0, 0, 0.32),
        0 0 25px rgba(91, 221, 255, 0.22) !important;
}

/* دخول البطاقة */

@keyframes pgHexListenCardEntrance {
    from {
        opacity: 0;
        transform:
            translateY(38px)
            scale(0.90);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* نبض السماعة */

@keyframes pgHexListenHeadphonePulse {
    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.07)
            rotate(2deg);
    }
}
/* ==================================================
   اسمع وركّز في الشبكة — تصميم صفحة السؤال
   ================================================== */

/* بطاقة السؤال بعد اختفاء مشغل الصوت */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-text {
    position: relative !important;
    z-index: 25 !important;

    width: min(820px, 76vw) !important;
    min-height: 180px !important;

    margin: 20vh auto 28px !important;
    padding: 74px 50px 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1.55 !important;
    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 81, 139, 0.97),
            rgba(67, 34, 127, 0.97)
        ) !important;

    border: 3px solid #77edff !important;
    border-radius: 31px !important;

    box-shadow:
        0 12px 0 #071e58,
        0 26px 56px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 40px rgba(90, 224, 255, 0.27) !important;

    text-shadow:
        0 4px 9px rgba(0, 0, 0, 0.34) !important;

    animation:
        pgHexListenQuestionEntrance
        0.55s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

/* شارة الموجة الصوتية أعلى السؤال */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-text::before {
    content: "🎙️  تم الاستماع  )))" !important;

    position: absolute !important;

    top: -26px !important;
    left: 50% !important;

    padding: 10px 31px !important;

    color: #17345f !important;
    font-family: Cairo, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background:
        linear-gradient(
            180deg,
            #9dffdc,
            #42dbb6
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 999px !important;

    box-shadow:
        0 7px 0 #12816c,
        0 13px 24px rgba(0, 0, 0, 0.30) !important;

    transform:
        translateX(-50%)
        rotate(-1deg) !important;
}

/* زر إظهار الإجابة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 30 !important;

    min-width: 310px !important;
    min-height: 65px !important;

    margin: 10px auto !important;
    padding: 12px 34px !important;

    display: block !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 21px !important;
    font-weight: 900 !important;

    background:
        linear-gradient(
            180deg,
            #ffad42,
            #f56b17
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 20px !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 0 #96390a,
        0 17px 31px rgba(245, 107, 23, 0.37),
        0 0 28px rgba(255, 163, 55, 0.31) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    filter: brightness(1.1) !important;

    transform:
        translateY(-4px)
        scale(1.025) !important;

    box-shadow:
        0 12px 0 #96390a,
        0 22px 37px rgba(245, 107, 23, 0.44),
        0 0 38px rgba(255, 163, 55, 0.42) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform: translateY(6px) !important;

    box-shadow:
        0 2px 0 #96390a,
        0 7px 15px rgba(0, 0, 0, 0.30) !important;
}

@keyframes pgHexListenQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(0.91);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==================================================
   اسمع وركّز في الشبكة — تصميم صفحة الإجابة
   ================================================== */

/* إخفاء اسم الفريق في صفحة الإجابة فقط */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-question-header {
    display: none !important;
}

/* بطاقة الإجابة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    width: min(760px, 76vw) !important;
    min-height: 205px !important;

    margin: 20vh auto 22px !important;
    padding: 72px 45px 35px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 13px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(89, 46, 145, 0.98),
            rgba(17, 91, 130, 0.98)
        ) !important;

    border: 3px solid #d8a1ff !important;
    border-radius: 32px !important;

    box-shadow:
        0 13px 0 #35165f,
        0 28px 60px rgba(0, 0, 0, 0.43),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 0 45px rgba(193, 111, 255, 0.30) !important;

    animation:
        pgHexListenAnswerEntrance
        0.58s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

/* عنوان الإجابة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden)
> span {
    position: absolute !important;

    top: -27px !important;
    left: 50% !important;

    padding: 10px 35px !important;

    color: #54300b !important;
    font-family: Cairo, sans-serif !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;

    background:
        linear-gradient(
            180deg,
            #fff58e,
            #ffc83d
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 999px !important;

    box-shadow:
        0 7px 0 #b96d0d,
        0 14px 25px rgba(0, 0, 0, 0.31) !important;

    transform:
        translateX(-50%)
        rotate(1deg) !important;
}

/* رمز صوتي داخل بطاقة الإجابة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-answer-area:not(.pg-hex-hidden)::before {
    content: "🔊" !important;

    display: block !important;

    margin-bottom: 2px !important;

    font-size: 43px !important;

    filter:
        drop-shadow(
            0 5px 8px rgba(0, 0, 0, 0.30)
        ) !important;
}

/* نص الإجابة */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-answer-text {
    color: #ffffff !important;

    font-family: Cairo, sans-serif !important;
    font-size: clamp(30px, 3.6vw, 47px) !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: center !important;

    text-shadow:
        0 4px 10px rgba(0, 0, 0, 0.38),
        0 0 22px rgba(216, 161, 255, 0.31) !important;
}

/* أزرار التحكيم */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 25 !important;

    width: min(650px, 72vw) !important;

    margin: 19px auto 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(220px, 1fr)) !important;
    gap: 23px !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-judgement-buttons button {
    min-height: 64px !important;
    padding: 12px 24px !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    border: 3px solid #ffffff !important;
    border-radius: 20px !important;

    cursor: pointer !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-correct-button {
    background:
        linear-gradient(
            180deg,
            #3de28c,
            #159b58
        ) !important;

    box-shadow:
        0 8px 0 #08683a,
        0 16px 27px rgba(21, 155, 88, 0.32) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-wrong-button {
    background:
        linear-gradient(
            180deg,
            #ff6969,
            #d62f4a
        ) !important;

    box-shadow:
        0 8px 0 #851c31,
        0 16px 27px rgba(214, 47, 74, 0.32) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-judgement-buttons button:hover {
    filter: brightness(1.11) !important;

    transform:
        translateY(-4px)
        scale(1.025) !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-judgement-buttons button:active {
    transform: translateY(6px) !important;
    box-shadow: none !important;
}

@keyframes pgHexListenAnswerEntrance {
    from {
        opacity: 0;
        transform:
            translateY(36px)
            scale(0.89)
            rotate(-1deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}
/* ==================================================
   اسمع وركّز في الشبكة — المؤقت واسم الفريق
   ================================================== */

/* المؤقت أعلى اليسار */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-timer {
    position: absolute !important;
    z-index: 150 !important;

    top: 30px !important;
    left: 68px !important;
    right: auto !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;

    background:
        conic-gradient(
            #ffb23f
            var(--pg-hex-time-progress, 360deg),
            rgba(255, 255, 255, 0.14) 0
        ) !important;

    border: 3px solid #ffffff !important;

    box-shadow:
        0 7px 0 #8a3c0a,
        0 14px 25px rgba(0, 0, 0, 0.34),
        0 0 27px rgba(255, 174, 62, 0.35) !important;
}

/* مكان اسم الفريق */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-header {
    position: absolute !important;
    z-index: 150 !important;

    top: 124px !important;
    left: 50px !important;
    right: auto !important;

    width: 118px !important;

    margin: 0 !important;

    display: block !important;

    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-team-name {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 8px 6px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #1f82c5,
            #15539a
        ) !important;

    border: 2px solid #78e9ff !important;
    border-radius: 15px !important;

    box-shadow:
        0 6px 0 #08295f,
        0 12px 20px rgba(0, 0, 0, 0.29),
        0 0 20px rgba(78, 216, 255, 0.22) !important;
}

/* أثناء صفحة الصوت: اسم الفريق يرتفع مكان المؤقت */

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode:has(
    #pg-hex-audio-box:not(.pg-hex-hidden)
)
.pg-hex-question-header {
    top: 42px !important;
}
/* ==================================================
   شوف وركّز في الشبكة — عيون ورموز سينمائية متحركة
   ================================================== */

/* العين الكبيرة المتحركة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::before {
    content: "👀" !important;

    position: absolute !important;
    z-index: 2 !important;

    top: 9% !important;
    right: 5% !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    color: initial !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: clamp(74px, 8vw, 125px) !important;
    line-height: 1 !important;

    opacity: 0.22 !important;

    filter:
        drop-shadow(
            0 10px 18px rgba(0, 0, 0, 0.25)
        ) !important;

    box-shadow: none !important;

    transform-origin: center !important;
    pointer-events: none !important;

    animation:
        pgHexFocusEyesBlink 4.2s ease-in-out infinite,
        pgHexFocusEyesFloat 7s ease-in-out infinite alternate !important;
}

/* شريط رموز السينما والمشاهدة */

html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-card::after {
    content: "🎬  👁️  🎥" !important;

    position: absolute !important;
    z-index: 2 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    color: initial !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: clamp(52px, 6vw, 88px) !important;
    line-height: 1 !important;
    letter-spacing: 10px !important;
    white-space: nowrap !important;

    opacity: 0.16 !important;

    filter:
        drop-shadow(
            0 10px 18px rgba(0, 0, 0, 0.28)
        ) !important;

    box-shadow: none !important;

    pointer-events: none !important;

    animation:
        pgHexFocusCinemaFloat
        7.5s ease-in-out infinite alternate !important;
}

/* رمشة العين */

@keyframes pgHexFocusEyesBlink {
    0%,
    42%,
    46%,
    100% {
        scale: 1 1;
    }

    44% {
        scale: 1 0.12;
    }

    72% {
        scale: 1 1;
    }

    74% {
        scale: 1 0.18;
    }

    76% {
        scale: 1 1;
    }
}

/* حركة العين */

@keyframes pgHexFocusEyesFloat {
    from {
        translate: 0 0;
        rotate: -4deg;
    }

    to {
        translate: -25px 18px;
        rotate: 5deg;
    }
}

/* حركة رموز السينما */

@keyframes pgHexFocusCinemaFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
    }

    to {
        translate: 30px -20px;
        rotate: -4deg;
    }
}
/* ==================================================
   إعداد المباراة — اختيار نمط كل جولة
   ================================================== */

.pg-round-mode-planner {
    width: min(860px, 94%) !important;

    margin: 18px auto 25px !important;
    padding: 16px 18px 18px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 54, 116, 0.96),
            rgba(34, 36, 109, 0.96)
        ) !important;

    border: 2px solid #61cfff !important;
    border-radius: 22px !important;

    box-shadow:
        0 8px 0 #071c51,
        0 16px 30px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.19) !important;
}

.pg-round-mode-planner-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    margin-bottom: 14px !important;

    color: #ffffff !important;
    text-align: right !important;
}

.pg-round-mode-planner-title
> span {
    width: 48px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    font-size: 27px !important;

    background:
        linear-gradient(
            180deg,
            #ffd75e,
            #ff9e26
        ) !important;

    border: 2px solid #ffffff !important;
    border-radius: 15px !important;

    box-shadow:
        0 5px 0 #a9520b,
        0 9px 17px rgba(0, 0, 0, 0.25) !important;
}

.pg-round-mode-planner-title
strong {
    display: block !important;

    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.pg-round-mode-planner-title
small {
    display: block !important;

    margin-top: 1px !important;

    color: #bdeaff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.pg-round-mode-list {
    display: grid !important;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(235px, 1fr)
        ) !important;
    gap: 10px !important;
}

.pg-round-mode-row {
    min-height: 62px !important;

    padding: 9px 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    box-sizing: border-box !important;

    background:
        rgba(255, 255, 255, 0.075) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.19) !important;
    border-radius: 14px !important;
}

.pg-round-mode-row
> strong {
    flex: 0 0 auto !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.pg-round-mode-buttons {
    display: flex !important;
    gap: 6px !important;
}

.pg-round-mode-button {
    min-width: 76px !important;
    min-height: 38px !important;

    padding: 6px 10px !important;

    color: #d8efff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;

    background:
        rgba(4, 26, 69, 0.72) !important;

    border:
        2px solid
        rgba(116, 205, 255, 0.37) !important;
    border-radius: 11px !important;

    cursor: pointer !important;

    box-shadow:
        0 4px 0 rgba(2, 13, 44, 0.72) !important;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease !important;
}

.pg-round-mode-button:hover {
    transform: translateY(-2px) !important;

    border-color: #ffffff !important;
}

.pg-round-mode-button.selected[
    data-round-mode="puzzle"
] {
    color: #173561 !important;

    background:
        linear-gradient(
            180deg,
            #ffe875,
            #ffb632
        ) !important;

    border-color: #ffffff !important;

    box-shadow:
        0 4px 0 #a7600c,
        0 8px 14px rgba(255, 182, 50, 0.20) !important;
}

.pg-round-mode-button.selected[
    data-round-mode="hex"
] {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #35dba8,
            #12976f
        ) !important;

    border-color: #ffffff !important;

    box-shadow:
        0 4px 0 #086044,
        0 8px 14px rgba(18, 151, 111, 0.22) !important;
}

.pg-round-mode-button:active {
    transform: translateY(3px) !important;
    box-shadow: none !important;
}

.pg-round-mode-row.pg-round-mode-hidden {
    display: none !important;
}

@media (max-width: 650px) {
    .pg-round-mode-planner {
        width: 96% !important;
        padding: 14px 12px 16px !important;
    }

    .pg-round-mode-list {
        grid-template-columns: 1fr !important;
    }
}
/* ==================================================
   إعداد المباراة — تصميم مسار الجولات الخفيف
   ================================================== */

.pg-round-mode-planner {
    width: min(920px, 95%) !important;

    margin: 14px auto 22px !important;
    padding: 13px 16px 16px !important;

    background:
        rgba(255, 255, 255, 0.68) !important;

    border:
        1px solid
        rgba(61, 139, 205, 0.24) !important;
    border-radius: 18px !important;

    box-shadow:
        0 8px 24px rgba(20, 59, 108, 0.09) !important;

    backdrop-filter:
        blur(8px) !important;
}

/* العنوان الخفيف */

.pg-round-mode-planner-title {
    justify-content: flex-start !important;
    gap: 8px !important;

    width: max-content !important;

    margin:
        0 auto 12px !important;

    color: #244b78 !important;
    text-align: center !important;
}

.pg-round-mode-planner-title
> span {
    width: 31px !important;
    height: 31px !important;

    font-size: 17px !important;

    background: #edf7ff !important;

    border:
        1px solid
        rgba(53, 145, 209, 0.24) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
}

.pg-round-mode-planner-title
strong {
    color: #244b78 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.pg-round-mode-planner-title
small {
    display: none !important;
}

/* مسار الجولات */

.pg-round-mode-list {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 10px !important;
}

/* بطاقة الجولة الخفيفة */

.pg-round-mode-row {
    position: relative !important;

    flex:
        1 1 145px !important;

    width: auto !important;
    max-width: 175px !important;
    min-height: 84px !important;

    padding: 10px 9px !important;

    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;

    background:
        rgba(247, 251, 255, 0.90) !important;

    border:
        1px solid
        rgba(63, 138, 199, 0.18) !important;
    border-radius: 14px !important;

    box-shadow:
        0 4px 13px rgba(34, 87, 139, 0.07) !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease !important;
}

.pg-round-mode-row:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(63, 138, 199, 0.37) !important;
}

/* رقم الجولة */

.pg-round-mode-row
> strong {
    color: #527392 !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

/* مفتاح الاختيار المقسوم */

.pg-round-mode-buttons {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        1fr 1fr !important;

    gap: 3px !important;

    padding: 3px !important;

    box-sizing: border-box !important;

    background: #eaf1f7 !important;
    border-radius: 11px !important;
}

.pg-round-mode-button {
    min-width: 0 !important;
    min-height: 34px !important;

    padding: 5px 6px !important;

    color: #6d8297 !important;
    font-size: 11px !important;
    font-weight: 800 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    transition:
        color 0.17s ease,
        background 0.17s ease,
        transform 0.17s ease !important;
}

.pg-round-mode-button:hover {
    color: #244b78 !important;

    transform: none !important;
}

/* اختيار البازل */

.pg-round-mode-button.selected[
    data-round-mode="puzzle"
] {
    color: #73530b !important;

    background:
        linear-gradient(
            180deg,
            #fff7c8,
            #ffe894
        ) !important;

    border: 0 !important;

    box-shadow:
        0 2px 7px
        rgba(218, 164, 30, 0.15) !important;
}

/* اختيار الشبكة */

.pg-round-mode-button.selected[
    data-round-mode="hex"
] {
    color: #17634e !important;

    background:
        linear-gradient(
            180deg,
            #d9fff2,
            #aef0d8
        ) !important;

    border: 0 !important;

    box-shadow:
        0 2px 7px
        rgba(27, 155, 116, 0.14) !important;
}

.pg-round-mode-button:active {
    transform:
        scale(0.97) !important;

    box-shadow: none !important;
}

@media (max-width: 650px) {
    .pg-round-mode-planner {
        padding:
            12px 10px 14px !important;
    }

    .pg-round-mode-row {
        flex-basis: 125px !important;
        max-width: 160px !important;
    }
}
/* ==================================================
   مسار الجولات — دائرة توضيح الاختيار
   ================================================== */

.pg-round-mode-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* الدائرة المفرغة */

.pg-round-mode-button::before {
    content: "" !important;

    width: 13px !important;
    height: 13px !important;

    flex: 0 0 13px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: 2px solid #8ca0b2 !important;
    border-radius: 50% !important;

    transition:
        background 0.17s ease,
        border-color 0.17s ease,
        box-shadow 0.17s ease,
        transform 0.17s ease !important;
}

/* الدائرة عند اختيار النمط */

.pg-round-mode-button.selected::before {
    background: #24384d !important;

    border-color: #24384d !important;

    box-shadow:
        inset 0 0 0 3px #ffffff,
        0 1px 4px rgba(25, 48, 71, 0.25) !important;

    transform:
        scale(1.08) !important;
}

/* لون دائرة البازل المختار */

.pg-round-mode-button.selected[
    data-round-mode="puzzle"
]::before {
    background: #7b5b0d !important;
    border-color: #7b5b0d !important;
}

/* لون دائرة الشبكة المختارة */

.pg-round-mode-button.selected[
    data-round-mode="hex"
]::before {
    background: #17634e !important;
    border-color: #17634e !important;
}
/* ==================================================
   زوم في لعبة الشبكة — خلفية العدسات المتحركة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode {
    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(255, 208, 74, 0.20) 0 6%,
            transparent 24%
        ),
        radial-gradient(
            circle at 86% 22%,
            rgba(74, 211, 255, 0.21) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 78% 84%,
            rgba(190, 103, 255, 0.19) 0 8%,
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #061632 0%,
            #123d75 48%,
            #39216d 100%
        ) !important;
}

/* دوائر تركيز متكررة داخل الخلفية */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        repeating-radial-gradient(
            circle at 50% 48%,
            transparent 0 54px,
            rgba(107, 217, 255, 0.045)
                55px 57px,
            transparent 58px 108px
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.008)
        ) !important;
}

/* عدسة كبيرة تتحرك في أعلى الخلفية */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::before {
    content: "🔍" !important;

    position: absolute !important;
    z-index: 0 !important;

    top: 7% !important;
    right: 5% !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    color: initial !important;
    background: none !important;
    border: 0 !important;

    font-size:
        clamp(78px, 9vw, 140px) !important;
    line-height: 1 !important;

    opacity: 0.18 !important;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(0, 0, 0, 0.27)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomLensFloat
        7s ease-in-out infinite alternate !important;
}

/* مجموعة رموز التكبير والتركيز */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::after {
    content: "🔎  ◉  🔍" !important;

    position: absolute !important;
    z-index: 0 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    color: rgba(255, 255, 255, 0.75) !important;
    background: none !important;
    border: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(48px, 6vw, 86px) !important;
    line-height: 1 !important;
    letter-spacing: 10px !important;
    white-space: nowrap !important;

    opacity: 0.14 !important;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(0, 0, 0, 0.26)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomIconsFloat
        8s ease-in-out infinite alternate !important;
}

/* حركة العدسة الكبيرة */

@keyframes pgHexZoomLensFloat {
    0% {
        translate: 0 0;
        rotate: -9deg;
        scale: 0.92;
    }

    55% {
        translate: -20px 14px;
        rotate: 4deg;
        scale: 1.10;
    }

    100% {
        translate: -35px 25px;
        rotate: 10deg;
        scale: 0.98;
    }
}

/* حركة رموز التركيز */

@keyframes pgHexZoomIconsFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
        scale: 0.94;
    }

    to {
        translate: 32px -22px;
        rotate: -5deg;
        scale: 1.07;
    }
}

/* نبض هادئ لدوائر التركيز */

html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card {
    animation:
        pgHexZoomBackgroundPulse
        5.5s ease-in-out infinite alternate !important;
}

@keyframes pgHexZoomBackgroundPulse {
    from {
        box-shadow:
            inset 0 0 65px
            rgba(55, 189, 255, 0.06);
    }

    to {
        box-shadow:
            inset 0 0 105px
            rgba(179, 92, 255, 0.13);
    }
}
/* ==================================================
   جاي بالغلط في الشبكة — خلفية الدخيل المتحركة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode {
    background:
        radial-gradient(
            circle at 13% 17%,
            rgba(255, 171, 55, 0.21) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 87% 20%,
            rgba(76, 220, 255, 0.20) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 85%,
            rgba(255, 89, 151, 0.18) 0 8%,
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #071636 0%,
            #153f78 48%,
            #492369 100%
        ) !important;
}

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.035),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.008)
        ) !important;
}

/* مجموعة متشابهة وبداخلها دخيل */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card::before {
    content: "●  ●  ★  ●" !important;

    position: absolute !important;
    z-index: 0 !important;

    top: 8% !important;
    right: 4% !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    color: rgba(90, 222, 255, 0.18) !important;
    background: none !important;
    border: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(50px, 6vw, 88px) !important;
    line-height: 1 !important;
    letter-spacing: 11px !important;
    white-space: nowrap !important;

    text-shadow:
        0 9px 17px
        rgba(0, 0, 0, 0.25) !important;

    pointer-events: none !important;

    animation:
        pgHexOddSymbolsFloat
        7s ease-in-out infinite alternate !important;
}

/* مجموعة ثانية فيها شكل مختلف */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card::after {
    content: "◆  ◆  ●  ◆" !important;

    position: absolute !important;
    z-index: 0 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    color: rgba(255, 185, 62, 0.17) !important;
    background: none !important;
    border: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(48px, 6vw, 84px) !important;
    line-height: 1 !important;
    letter-spacing: 12px !important;
    white-space: nowrap !important;

    text-shadow:
        0 9px 17px
        rgba(0, 0, 0, 0.27) !important;

    pointer-events: none !important;

    animation:
        pgHexOddSymbolsFloatReverse
        8s ease-in-out infinite alternate !important;
}

/* حركة المجموعة الأولى */

@keyframes pgHexOddSymbolsFloat {
    from {
        translate: 0 0;
        rotate: -4deg;
        scale: 0.94;
    }

    to {
        translate: -30px 22px;
        rotate: 5deg;
        scale: 1.07;
    }
}

/* حركة المجموعة الثانية */

@keyframes pgHexOddSymbolsFloatReverse {
    from {
        translate: 0 0;
        rotate: 5deg;
        scale: 1.06;
    }

    to {
        translate: 34px -24px;
        rotate: -5deg;
        scale: 0.94;
    }
}

/* إبراز الشكل الدخيل بنبض خفيف للخلفية */

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-card {
    animation:
        pgHexOddBackgroundPulse
        5.5s ease-in-out infinite alternate !important;
}

@keyframes pgHexOddBackgroundPulse {
    from {
        box-shadow:
            inset 0 0 70px
            rgba(64, 202, 255, 0.06);
    }

    to {
        box-shadow:
            inset 0 0 110px
            rgba(255, 137, 54, 0.12);
    }
}
/* ==================================================
   حروف متحركة في الشبكة — إخفاء وسائل المساعدة
   ================================================== */

body:has(
    #pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team1-helps,

body:has(
    #pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
        .pg-hex-hidden
    )
)
#pg-hex-team2-helps {
    display: none !important;
}
/* ==================================================
   حروف متحركة في الشبكة — شاشة كاملة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card {
    position: relative !important;

    width: 100vw !important;
    height: 100dvh !important;

    min-width: 100vw !important;
    min-height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 24px 38px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border: 0 !important;
    border-radius: 0 !important;
}
/* ==================================================
   حروف متحركة في الشبكة — الخلفية الفخمة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode {
    background:
        radial-gradient(
            circle at 13% 18%,
            rgba(255, 191, 55, 0.22) 0 7%,
            transparent 25%
        ),
        radial-gradient(
            circle at 87% 20%,
            rgba(72, 220, 255, 0.20) 0 7%,
            transparent 26%
        ),
        radial-gradient(
            circle at 80% 84%,
            rgba(201, 91, 255, 0.20) 0 8%,
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #061631 0%,
            #123d78 48%,
            #432270 100%
        ) !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card {
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.04),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.007)
        ) !important;

    box-shadow:
        inset 0 0 100px
        rgba(60, 203, 255, 0.08) !important;
}

/* حروف عربية متحركة أعلى الخلفية */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card::before {
    content: "أ  ب  ج  د  هـ" !important;

    position: absolute !important;
    z-index: -1 !important;

    top: 8% !important;
    right: 4% !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: auto !important;

    color:
        rgba(91, 222, 255, 0.15) !important;

    background: none !important;
    border: 0 !important;

    font-family: Cairo, sans-serif !important;
    font-size:
        clamp(48px, 6vw, 88px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 15px !important;
    white-space: nowrap !important;

    text-shadow:
        0 10px 18px
        rgba(0, 0, 0, 0.25) !important;

    pointer-events: none !important;

    animation:
        pgHexLettersBackgroundFloat
        8s ease-in-out infinite alternate !important;
}

/* حروف إنجليزية متحركة أسفل الخلفية */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card::after {
    content: "A  B  C  D  E" !important;

    position: absolute !important;
    z-index: -1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    color:
        rgba(255, 193, 63, 0.14) !important;

    background: none !important;
    border: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(46px, 6vw, 84px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 14px !important;
    white-space: nowrap !important;

    text-shadow:
        0 10px 18px
        rgba(0, 0, 0, 0.27) !important;

    pointer-events: none !important;

    animation:
        pgHexLettersBackgroundReverse
        9s ease-in-out infinite alternate !important;
}

@keyframes pgHexLettersBackgroundFloat {
    from {
        translate: 0 0;
        rotate: -4deg;
        scale: 0.94;
    }

    to {
        translate: -32px 22px;
        rotate: 5deg;
        scale: 1.07;
    }
}

@keyframes pgHexLettersBackgroundReverse {
    from {
        translate: 0 0;
        rotate: 5deg;
        scale: 1.06;
    }

    to {
        translate: 35px -24px;
        rotate: -5deg;
        scale: 0.94;
    }
}
/* ==================================================
   حروف متحركة في الشبكة — المسرح ودوائر الحروف
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-box {
    position: relative !important;
    z-index: 20 !important;

    width: min(980px, 78vw) !important;

    margin: 105px auto 18px !important;
    padding: 18px 20px 20px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(9, 53, 112, 0.91),
            rgba(43, 29, 101, 0.91)
        ) !important;

    border: 3px solid #67dfff !important;
    border-radius: 28px !important;

    box-shadow:
        0 11px 0 #061d53,
        0 24px 50px rgba(0, 0, 0, 0.39),
        inset 0 1px 0
        rgba(255, 255, 255, 0.22),
        0 0 38px
        rgba(76, 210, 255, 0.24) !important;
}

/* التلميح أعلى الحروف */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-clue {
    width: max-content !important;
    max-width: 90% !important;

    margin: -42px auto 15px !important;
    padding: 9px 28px !important;

    color: #17315c !important;
    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #fff382,
            #ffbd3f
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 999px !important;

    box-shadow:
        0 6px 0 #ad620b,
        0 12px 22px
        rgba(0, 0, 0, 0.28) !important;
}

/* مساحة حركة الحروف */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-stage {
    position: relative !important;

    width: 100% !important;
    height: 380px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at center,
            rgba(39, 119, 191, 0.72),
            rgba(5, 27, 73, 0.93)
        ) !important;

    border:
        2px solid
        rgba(255, 255, 255, 0.28) !important;
    border-radius: 21px !important;

    box-shadow:
        inset 0 0 42px
        rgba(0, 0, 0, 0.29) !important;
}

/* دوائر الحروف الكبيرة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter {
    width: 72px !important;
    height: 72px !important;

    display: grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    color: #183663 !important;

    background:
        radial-gradient(
            circle at 35% 27%,
            #fffbd0 0 12%,
            #ffdf62 40%,
            #ffac32 100%
        ) !important;

    border: 4px solid #ffffff !important;
    border-radius: 50% !important;

    font-family: Cairo, sans-serif !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.60) !important;

    box-shadow:
        0 7px 0 #a9510b,
        0 13px 22px
        rgba(0, 0, 0, 0.34),
        inset 0 3px 0
        rgba(255, 255, 255, 0.52),
        0 0 18px
        rgba(255, 188, 50, 0.27) !important;

    will-change: transform !important;
}
/* ==================================================
   حروف متحركة — ضبط الصفحة دون Scroll
   والمؤقت واسم الفريق يسارًا
   ================================================== */

/* منع السكرول أثناء فتح الفئة */

html body:has(
    #pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
        .pg-hex-hidden
    )
) {
    overflow: hidden !important;
}

/* تثبيت المؤقت أعلى اليسار */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-timer {
    position: absolute !important;
    z-index: 160 !important;

    top: 28px !important;
    left: 62px !important;
    right: auto !important;

    width: 82px !important;
    height: 82px !important;

    margin: 0 !important;
}

/* وضع اسم الفريق تحت المؤقت */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-header {
    position: absolute !important;
    z-index: 160 !important;

    top: 121px !important;
    left: 43px !important;
    right: auto !important;

    width: 120px !important;

    margin: 0 !important;

    display: block !important;

    transform: none !important;
}

/* إخفاء رقم الخلية */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* تصميم اسم الفريق */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-team-name {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 8px 6px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #2186c8,
            #15539a
        ) !important;

    border: 2px solid #78e8ff !important;
    border-radius: 15px !important;

    box-shadow:
        0 6px 0 #08295e,
        0 12px 20px rgba(0, 0, 0, 0.28),
        0 0 19px rgba(74, 213, 255, 0.23) !important;
}

/* تثبيت عنوان السؤال ورفعه */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-text {
    position: absolute !important;
    z-index: 30 !important;

    top: 25dvh !important;
    left: 50% !important;
    right: auto !important;

    width: min(820px, 70vw) !important;

    margin: 0 !important;

    color: #ffffff !important;
    font-size:
        clamp(25px, 2.7vw, 37px) !important;
    font-weight: 900 !important;
    text-align: center !important;

    transform:
        translateX(-50%) !important;
}

/* تثبيت صندوق الحروف داخل الشاشة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-box {
    position: absolute !important;
    z-index: 25 !important;

    top: 43dvh !important;
    left: 50% !important;
    right: auto !important;

    width: min(980px, 76vw) !important;

    margin: 0 !important;
    padding: 17px 19px 18px !important;

    transform:
        translateX(-50%) !important;
}

/* تقليل ارتفاع المسرح ليدخل كاملًا */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-stage {
    height:
        clamp(
            210px,
            34dvh,
            285px
        ) !important;
}

/* وضع زر إظهار الإجابة أسفل الشاشة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 170 !important;

    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;

    margin: 0 !important;

    transform:
        translateX(-50%) !important;
}
/* ==================================================
   حروف متحركة — إصلاح زر إظهار الإجابة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 180 !important;

    top: auto !important;
    right: auto !important;
    bottom: 18px !important;
    left: 50% !important;

    width: auto !important;
    min-width: 270px !important;
    max-width: 340px !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 9px 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    background:
        linear-gradient(
            180deg,
            #ffad42,
            #f56b17
        ) !important;

    border: 3px solid #ffffff !important;
    border-radius: 18px !important;

    box-shadow:
        0 7px 0 #96390a,
        0 14px 27px rgba(0, 0, 0, 0.34),
        0 0 27px rgba(255, 153, 48, 0.31) !important;

    transform:
        translateX(-50%) !important;

    cursor: pointer !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    filter: brightness(1.1) !important;

    transform:
        translateX(-50%)
        translateY(-3px)
        scale(1.025) !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform:
        translateX(-50%)
        translateY(5px) !important;

    box-shadow:
        0 2px 0 #96390a,
        0 6px 13px rgba(0, 0, 0, 0.28) !important;
}
/* ==================================================
   حروف متحركة — تصغير دوائر الحروف
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter {
    width: 60px !important;
    height: 60px !important;

    border-width: 3px !important;

    font-size: 25px !important;

    box-shadow:
        0 6px 0 #a9510b,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 0 rgba(255, 255, 255, 0.50),
        0 0 15px rgba(255, 188, 50, 0.24) !important;
}
/* ==================================================
   حروف متحركة في الشبكة — ألوان الكلمات
   ================================================== */

/* الكلمة الأولى — برتقالي ذهبي */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-1 {
    color: #173663 !important;

    background:
        radial-gradient(
            circle at 34% 25%,
            #fffbd0 0 12%,
            #ffdf62 42%,
            #ffac32 100%
        ) !important;

    box-shadow:
        0 6px 0 #a9510b,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 0 rgba(255, 255, 255, 0.52),
        0 0 16px rgba(255, 188, 50, 0.28) !important;
}

/* الكلمة الثانية — أزرق سماوي */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-2 {
    color: #ffffff !important;

    background:
        radial-gradient(
            circle at 34% 25%,
            #a9edff 0 12%,
            #38acec 45%,
            #1764bd 100%
        ) !important;

    box-shadow:
        0 6px 0 #0b3e83,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 0 rgba(255, 255, 255, 0.48),
        0 0 16px rgba(64, 190, 255, 0.29) !important;
}

/* الكلمة الثالثة — أخضر */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-3 {
    color: #ffffff !important;

    background:
        radial-gradient(
            circle at 34% 25%,
            #b4ffd0 0 12%,
            #42d77d 45%,
            #159250 100%
        ) !important;

    box-shadow:
        0 6px 0 #086035,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 0 rgba(255, 255, 255, 0.48),
        0 0 16px rgba(60, 221, 129, 0.27) !important;
}

/* الكلمة الرابعة — بنفسجي */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-4 {
    color: #ffffff !important;

    background:
        radial-gradient(
            circle at 34% 25%,
            #edc5ff 0 12%,
            #b46bea 45%,
            #7433b5 100%
        ) !important;

    box-shadow:
        0 6px 0 #4d207f,
        0 11px 18px rgba(0, 0, 0, 0.32),
        inset 0 3px 0 rgba(255, 255, 255, 0.48),
        0 0 16px rgba(185, 102, 239, 0.27) !important;
}
/* ==================================================
   حروف متحركة — صفحة الإجابة المرتبة
   ================================================== */

/* إخفاء السؤال والمؤقت واسم الفريق والتلميح */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text,

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer,

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-question-header,

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-moving-letters-clue {
    display: none !important;
}

/* بطاقة الإجابة الصحيحة أعلى الصفحة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 80 !important;

    top: 30px !important;
    left: 50% !important;
    right: auto !important;

    width: min(720px, 72vw) !important;
    min-height: 112px !important;

    margin: 0 !important;
    padding: 20px 35px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            145deg,
            rgba(13, 103, 91, 0.97),
            rgba(17, 76, 124, 0.97)
        ) !important;

    border: 3px solid #72ffcf !important;
    border-radius: 24px !important;

    box-shadow:
        0 9px 0 #073e50,
        0 20px 40px rgba(0, 0, 0, 0.37),
        0 0 32px rgba(79, 255, 201, 0.22) !important;

    transform:
        translateX(-50%) !important;

    animation:
        pgHexMovingAnswerCardEntrance
        0.48s ease-out both !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-answer-area
> span {
    color: #8affd5 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-answer-text {
    color: #ffffff !important;

    font-family: Cairo, sans-serif !important;
    font-size:
        clamp(27px, 3.2vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    text-align: center !important;

    text-shadow:
        0 4px 9px
        rgba(0, 0, 0, 0.34) !important;
}

/* صندوق الحروف في وضع الإجابة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-moving-letters-box {
    top: 185px !important;

    width: min(940px, 76vw) !important;

    padding: 16px 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(9, 52, 108, 0.92),
            rgba(45, 29, 99, 0.92)
        ) !important;
}

/* مساحة ترتيب الإجابة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-moving-letters-stage.pg-hex-moving-answer-mode {
    height: 235px !important;

    padding: 22px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: 25px 40px !important;

    box-sizing: border-box !important;

    direction: rtl !important;
}

/* كل كلمة في مجموعة مستقلة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-answer-word {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    direction: rtl !important;

    padding: 11px 14px !important;

    background:
        rgba(255, 255, 255, 0.07) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;

    box-shadow:
        0 9px 18px
        rgba(0, 0, 0, 0.20) !important;
}

/* إلغاء الحركة والمواقع العشوائية بعد الكشف */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-answer-word
.pg-hex-moving-letter {
    position: static !important;

    flex: 0 0 60px !important;

    left: auto !important;
    top: auto !important;

    transform: none !important;

    animation:
        pgHexMovingAnswerLetterEntrance
        0.42s ease-out both !important;

    animation-delay:
        calc(
            var(
                --pg-hex-answer-letter-index,
                0
            ) * 0.055s
        ) !important;
}

/* أزرار التحكيم أسفل الصفحة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: absolute !important;
    z-index: 100 !important;

    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;

    width: min(650px, 70vw) !important;

    margin: 0 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, 1fr) !important;
    gap: 22px !important;

    transform:
        translateX(-50%) !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-judgement-buttons button {
    min-height: 58px !important;

    color: #ffffff !important;
    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;

    border: 3px solid #ffffff !important;
    border-radius: 18px !important;
}

@keyframes pgHexMovingAnswerCardEntrance {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(-25px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexMovingAnswerLetterEntrance {
    from {
        opacity: 0;
        scale: 0.55;
        rotate: -15deg;
    }

    to {
        opacity: 1;
        scale: 1;
        rotate: 0;
    }
}
/* ==================================================
   حروف متحركة — رفع عناصر صفحة السؤال
   ================================================== */

/* رفع عنوان السؤال */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-text {
    top: 19dvh !important;
}

/* رفع صندوق الحروف كاملًا */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-moving-letters-box {
    top: 34dvh !important;
}
/* ==================================================
   حروف متحركة — تحسين وضوح الحروف والألوان
   ================================================== */

/* وضوح الحرف داخل جميع الدوائر */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter {
    font-size: 27px !important;
    font-weight: 900 !important;

    border-color:
        rgba(255, 255, 255, 0.88) !important;

    -webkit-text-stroke:
        0.6px rgba(0, 0, 0, 0.40) !important;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.30),
        0 3px 6px rgba(0, 0, 0, 0.38) !important;
}

/* الكلمة الأولى — ذهبي أوضح */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-1 {
    color: #102c59 !important;

    background:
        linear-gradient(
            145deg,
            #ffe579 0%,
            #ffc13e 52%,
            #e78a18 100%
        ) !important;

    -webkit-text-stroke:
        0.5px rgba(255, 255, 255, 0.30) !important;

    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.36),
        0 3px 5px rgba(72, 38, 0, 0.28) !important;
}

/* الكلمة الثانية — أزرق واضح */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-2 {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #4fc8f4 0%,
            #237fd3 55%,
            #154b9a 100%
        ) !important;
}

/* الكلمة الثالثة — أخضر واضح */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-3 {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #56dc8a 0%,
            #20a85e 55%,
            #0b6b3b 100%
        ) !important;
}

/* الكلمة الرابعة — بنفسجي واضح */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-moving-letter-word-4 {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #c27bea 0%,
            #8c48cb 55%,
            #54268e 100%
        ) !important;
}
/* ==================================================
   حروف متحركة — تنويع حروف الخلفية
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card::before {
    content: "أ  ب  ج  د  A" !important;
}
/* ==================================================
   حروف متحركة — رفع السؤال وتنويع الخلفية
   ================================================== */

/* رفع جملة اكتشف الكلمة من الحروف المتحركة */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-text {
    top: 15.5dvh !important;
}

/* استبدال C بحرف عربي في المجموعة السفلية */

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-card::after {
    content: "A  B  ع  D  E" !important;
}
/* ==================================================
   الصفحة الأساسية للشبكة — الخلفية الاحترافية الجديدة
   ================================================== */

html body
#pg-hex-game-screen {
    position: fixed !important;
    isolation: isolate !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 72, 92, 0.19) 0 7%,
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(46, 220, 154, 0.18) 0 8%,
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(72, 153, 255, 0.19) 0 11%,
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #03122c 0%,
            #09295b 48%,
            #17184e 100%
        ) !important;
}

/* أشكال سداسية ضخمة وشفافة تتحرك */

html body
#pg-hex-game-screen::before {
    content:
        "⬡   ⬢   ⬡   ⬢   ⬡\A"
        "  ⬢   ⬡   ⬢   ⬡   ⬢\A"
        "⬡   ⬢   ⬡   ⬢   ⬡" !important;

    position: fixed !important;
    z-index: -2 !important;

    inset: -15% !important;

    width: 130% !important;
    height: 130% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    color:
        rgba(100, 204, 255, 0.055) !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(72px, 10vw, 155px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 23px !important;
    text-align: center !important;
    white-space: pre-wrap !important;

    pointer-events: none !important;

    animation:
        pgHexMainBackgroundDrift
        18s linear infinite alternate !important;
}

/* توهجات لونية متحركة */

html body
#pg-hex-game-screen::after {
    content: "" !important;

    position: fixed !important;
    z-index: -1 !important;

    width: 520px !important;
    height: 520px !important;

    top: 50% !important;
    left: 50% !important;

    background:
        conic-gradient(
            from 20deg,
            rgba(255, 73, 88, 0.15),
            rgba(255, 196, 61, 0.08),
            rgba(35, 220, 145, 0.15),
            rgba(63, 153, 255, 0.13),
            rgba(179, 78, 255, 0.12),
            rgba(255, 73, 88, 0.15)
        ) !important;

    border-radius: 42% 58% 63% 37% !important;

    filter:
        blur(55px) !important;

    opacity: 0.78 !important;

    transform:
        translate(-50%, -50%) !important;

    pointer-events: none !important;

    animation:
        pgHexMainGlowMove
        11s ease-in-out infinite alternate !important;
}

/* إبقاء محتوى اللعبة فوق الخلفية */

html body
#pg-hex-game-screen
.pg-hex-game-shell {
    position: relative !important;
    z-index: 2 !important;
}

@keyframes pgHexMainBackgroundDrift {
    from {
        translate: -2% -2%;
        rotate: -2deg;
        scale: 0.98;
    }

    to {
        translate: 3% 2%;
        rotate: 3deg;
        scale: 1.06;
    }
}

@keyframes pgHexMainGlowMove {
    0% {
        translate: -38vw -22vh;
        rotate: 0deg;
        scale: 0.88;
    }

    50% {
        translate: 18vw -5vh;
        rotate: 145deg;
        scale: 1.13;
    }

    100% {
        translate: -8vw 23vh;
        rotate: 290deg;
        scale: 0.96;
    }
}
/* ==================================================
   الشبكة — الخلية الذهبية عند مرور الماوس
   ================================================== */

html body
#pg-hex-game-screen
button.pg-hex-cell:not(
    .pg-hex-owned-red
):not(
    .pg-hex-owned-green
):hover {
    z-index: 30 !important;

    color: #4b3100 !important;

    background:
        linear-gradient(
            145deg,
            #a96b05 0%,
            #6f3d00 45%,
            #3d2100 100%
        ) !important;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72),
        0 2px 5px rgba(91, 48, 0, 0.25) !important;

    scale: 1.075 !important;

    filter:
        brightness(1.08)
        drop-shadow(
            0 9px 0 #724200
        )
        drop-shadow(
            0 16px 15px
            rgba(0, 0, 0, 0.38)
        )
        drop-shadow(
            0 0 15px
            rgba(255, 201, 51, 0.90)
        )
        drop-shadow(
            0 0 30px
            rgba(255, 161, 26, 0.46)
        ) !important;
}

/* السطح الذهبي للخلية */

html body
#pg-hex-game-screen
button.pg-hex-cell:not(
    .pg-hex-owned-red
):not(
    .pg-hex-owned-green
):hover::before {
    background:
        linear-gradient(
            145deg,
            #fff7b0 0%,
            #ffe061 30%,
            #ffc126 63%,
            #e8900d 100%
        ) !important;

    box-shadow:
        inset 0 5px 7px
        rgba(255, 255, 255, 0.72),
        inset 0 -9px 12px
        rgba(128, 67, 0, 0.28),
        0 0 18px
        rgba(255, 204, 48, 0.48) !important;
}

/* لمعة متحركة داخل الخلية الذهبية */

html body
#pg-hex-game-screen
button.pg-hex-cell:not(
    .pg-hex-owned-red
):not(
    .pg-hex-owned-green
):hover::after {
    background:
        linear-gradient(
            120deg,
            transparent 16%,
            rgba(255, 255, 255, 0.18) 35%,
            rgba(255, 255, 255, 0.76) 49%,
            rgba(255, 255, 255, 0.16) 63%,
            transparent 82%
        ) !important;

    background-size:
        220% 100% !important;

    animation:
        pgHexGoldenCellShine
        0.95s ease-in-out infinite !important;
}

@keyframes pgHexGoldenCellShine {
    from {
        background-position:
            130% center;
    }

    to {
        background-position:
            -120% center;
    }
}
/* ==================================================
   الصفحة الأساسية للشبكة — بطاقات الفرق والدور
   ================================================== */

html body
#pg-hex-game-screen
.pg-hex-game-header {
    position: relative !important;
    z-index: 10 !important;

    gap: 18px !important;
}

/* الشكل العام للبطاقات */

html body
#pg-hex-game-screen
.pg-hex-team,

html body
#pg-hex-game-screen
.pg-hex-turn-box {
    position: relative !important;

    min-height: 91px !important;

    overflow: hidden !important;

    border:
        2px solid
        rgba(255, 255, 255, 0.42) !important;
    border-radius: 22px !important;

    backdrop-filter:
        blur(12px) !important;

    box-shadow:
        0 10px 0 rgba(2, 13, 39, 0.72),
        0 19px 35px rgba(0, 0, 0, 0.27),
        inset 0 2px 0 rgba(255, 255, 255, 0.22) !important;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease !important;
}

/* لمعان يمر داخل البطاقات */

html body
#pg-hex-game-screen
.pg-hex-team::before,

html body
#pg-hex-game-screen
.pg-hex-turn-box::before {
    content: "" !important;

    position: absolute !important;
    z-index: 0 !important;

    top: -80% !important;
    left: -35% !important;

    width: 26% !important;
    height: 260% !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent
        ) !important;

    transform:
        rotate(22deg) !important;

    pointer-events: none !important;

    animation:
        pgHexHeaderCardShine
        5.5s ease-in-out infinite !important;
}

/* إبقاء النص فوق اللمعة */

html body
#pg-hex-game-screen
.pg-hex-team
> *,

html body
#pg-hex-game-screen
.pg-hex-turn-box
> * {
    position: relative !important;
    z-index: 2 !important;
}

/* بطاقة الفريق الأحمر */

html body
#pg-hex-game-screen
.pg-hex-team-red {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 166, 166, 0.26),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(218, 37, 60, 0.97),
            rgba(113, 10, 35, 0.98)
        ) !important;

    border-color:
        rgba(255, 151, 157, 0.78) !important;
}

/* بطاقة الفريق الأخضر */

html body
#pg-hex-game-screen
.pg-hex-team-green {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(164, 255, 200, 0.25),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(20, 163, 84, 0.97),
            rgba(5, 83, 48, 0.98)
        ) !important;

    border-color:
        rgba(121, 255, 174, 0.75) !important;
}

/* بطاقة الجولة والدور */

html body
#pg-hex-game-screen
.pg-hex-turn-box {
    width: auto !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 220, 91, 0.22),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(28, 100, 195, 0.97),
            rgba(14, 38, 105, 0.98)
        ) !important;

    border-color:
        rgba(255, 218, 84, 0.88) !important;

    box-shadow:
        0 10px 0 #071d58,
        0 19px 35px rgba(0, 0, 0, 0.29),
        inset 0 2px 0 rgba(255, 255, 255, 0.22),
        0 0 27px rgba(255, 211, 62, 0.19) !important;
}

/* أسماء الفرق */

html body
#pg-hex-game-screen
.pg-hex-team
strong {
    font-family: Cairo, sans-serif !important;
    font-size:
        clamp(20px, 2vw, 28px) !important;
    font-weight: 900 !important;

    text-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.35) !important;
}

/* النقاط */

html body
#pg-hex-game-screen
.pg-hex-team
small {
    min-width: 94px !important;

    margin-top: 7px !important;
    padding: 5px 15px !important;

    color: #17315a !important;
    font-size: 15px !important;
    font-weight: 900 !important;

    background:
        rgba(255, 255, 255, 0.94) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.95) !important;
    border-radius: 999px !important;

    box-shadow:
        0 4px 9px
        rgba(0, 0, 0, 0.20) !important;
}

/* ارتفاع بسيط عند المرور */

html body
#pg-hex-game-screen
.pg-hex-team:hover,

html body
#pg-hex-game-screen
.pg-hex-turn-box:hover {
    transform:
        translateY(-3px) !important;

    filter:
        brightness(1.07) !important;
}

@keyframes pgHexHeaderCardShine {
    0%,
    58% {
        left: -38%;
    }

    82%,
    100% {
        left: 125%;
    }
}
/* =========================================
   لعبة الشبكة فقط: إطار اللوحة وأطراف الأهداف
   ========================================= */

#pg-hex-game-screen .pg-hex-board-wrapper {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(42, 116, 190, 0.24),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #081932,
            #102c59 52%,
            #07172f
        );

    border-color: rgba(111, 211, 255, 0.75);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.48),
        0 0 0 3px rgba(255, 255, 255, 0.09),
        0 0 30px rgba(58, 185, 255, 0.28),
        inset 0 0 38px rgba(0, 0, 0, 0.42);

    overflow: hidden;
}

/* هدفا الفريق الأخضر: أعلى وأسفل */
#pg-hex-game-screen .pg-hex-border-top,
#pg-hex-game-screen .pg-hex-border-bottom {
    background:
        linear-gradient(
            90deg,
            #087d4a,
            #20d675,
            #65f7a4,
            #20d675,
            #087d4a
        );

    background-size: 220% 100%;

    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.32),
        0 0 22px rgba(31, 238, 126, 0.58);

    animation:
        pgHexGreenGoalFlow 4s linear infinite,
        pgHexGreenGoalPulse 2s ease-in-out infinite;
}

/* هدفا الفريق الأحمر: يمين ويسار */
#pg-hex-game-screen .pg-hex-border-left,
#pg-hex-game-screen .pg-hex-border-right {
    background:
        linear-gradient(
            180deg,
            #99152b,
            #f02d4f,
            #ff7185,
            #f02d4f,
            #99152b
        );

    background-size: 100% 220%;

    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.28),
        0 0 22px rgba(255, 45, 83, 0.55);

    animation:
        pgHexRedGoalFlow 4s linear infinite,
        pgHexRedGoalPulse 2s ease-in-out infinite;
}

#pg-hex-game-screen .pg-hex-board {
    filter:
        drop-shadow(0 10px 12px rgba(0, 0, 0, 0.32));
}

@keyframes pgHexGreenGoalFlow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 220% 50%;
    }
}

@keyframes pgHexRedGoalFlow {
    from {
        background-position: 50% 0%;
    }

    to {
        background-position: 50% 220%;
    }
}

@keyframes pgHexGreenGoalPulse {
    0%,
    100% {
        filter: brightness(0.92);
    }

    50% {
        filter: brightness(1.18);
    }
}

@keyframes pgHexRedGoalPulse {
    0%,
    100% {
        filter: brightness(0.92);
    }

    50% {
        filter: brightness(1.15);
    }
}
/* =========================================
   لعبة الشبكة فقط: تجميل الخلايا السداسية
   ========================================= */

#pg-hex-game-screen button.pg-hex-cell {
    color: #10244b;
    font-weight: 900;
    text-shadow:
        0 1px 0 #ffffff,
        0 2px 4px rgba(0, 0, 0, 0.22);

    filter:
        drop-shadow(0 7px 5px rgba(0, 0, 0, 0.3));

    transition:
        filter 0.25s ease,
        color 0.25s ease;
}

/* سطح الخلية الفارغة */
#pg-hex-game-screen button.pg-hex-cell:not(.pg-hex-owned-red):not(.pg-hex-owned-green)::before {
    background:
        radial-gradient(
            circle at 34% 25%,
            #ffffff 0%,
            #ffffff 14%,
            #ddecf7 42%,
            #9fb6cc 78%,
            #6e849b 100%
        );

    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.9),
        inset 0 -6px 8px rgba(22, 48, 79, 0.3);
}

/* لمعان هادئ يمر فوق الخلايا الفارغة */
#pg-hex-game-screen button.pg-hex-cell:not(.pg-hex-owned-red):not(.pg-hex-owned-green)::after {
    content: "";
    position: absolute;
    inset: 9%;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            transparent 28%,
            rgba(255, 255, 255, 0.75) 46%,
            transparent 62%
        );

    background-size: 240% 100%;
    background-position: 180% 0;

    clip-path: inherit;
    opacity: 0.55;

    animation:
        pgHexCellSoftShine 4.5s ease-in-out infinite;
}

/* بريق الخلايا التي امتلكها الفريق الأحمر */
#pg-hex-game-screen button.pg-hex-cell.pg-hex-owned-red {
    color: #ffffff;

    filter:
        drop-shadow(0 6px 5px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 8px rgba(255, 47, 82, 0.65));

    text-shadow:
        0 2px 3px rgba(91, 0, 18, 0.8);
}

/* بريق الخلايا التي امتلكها الفريق الأخضر */
#pg-hex-game-screen button.pg-hex-cell.pg-hex-owned-green {
    color: #ffffff;

    filter:
        drop-shadow(0 6px 5px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 8px rgba(32, 224, 121, 0.65));

    text-shadow:
        0 2px 3px rgba(0, 76, 40, 0.8);
}

/* نبضة بسيطة للخلية المختارة */
#pg-hex-game-screen button.pg-hex-cell.pg-hex-selected {
    animation:
        pgHexSelectedCellPulse 1.15s ease-in-out infinite;
}

@keyframes pgHexCellSoftShine {
    0%,
    60% {
        background-position: 180% 0;
    }

    85%,
    100% {
        background-position: -100% 0;
    }
}

@keyframes pgHexSelectedCellPulse {
    0%,
    100% {
        filter:
            drop-shadow(0 7px 5px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 6px rgba(255, 205, 45, 0.7));
    }

    50% {
        filter:
            drop-shadow(0 9px 7px rgba(0, 0, 0, 0.38))
            drop-shadow(0 0 17px rgba(255, 205, 45, 1));
    }
}
/* =========================================
   لعبة الشبكة فقط: شريط رسالة الجولة
   ========================================= */

#pg-hex-game-screen .pg-hex-question-message {
    position: relative;
    isolation: isolate;

    width: min(690px, 88%);
    margin: 2px auto 0;
    padding: 14px 70px 14px 24px;

    overflow: hidden;

    border: 2px solid rgba(103, 218, 255, 0.82);
    border-radius: 50px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            rgba(8, 35, 82, 0.96),
            rgba(16, 81, 139, 0.96),
            rgba(44, 38, 123, 0.96)
        );

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(68, 196, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.42);
}

/* رمز سداسي متحرك بجانب الرسالة */
#pg-hex-game-screen .pg-hex-question-message::before {
    content: "⬢";

    position: absolute;
    top: 50%;
    right: 18px;
    z-index: -1;

    color: #ffd447;
    font-size: 2.2rem;
    line-height: 1;

    filter:
        drop-shadow(0 0 7px rgba(255, 204, 49, 0.85));

    transform: translateY(-50%);
    animation:
        pgHexMessageIconPulse 1.8s ease-in-out infinite;
}

/* شعاع ضوء يمر داخل شريط الرسالة */
#pg-hex-game-screen .pg-hex-question-message::after {
    content: "";

    position: absolute;
    top: -70%;
    left: -30%;
    z-index: -1;

    width: 22%;
    height: 240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );

    transform: rotate(18deg);
    animation:
        pgHexMessageLight 4s ease-in-out infinite;
}

@keyframes pgHexMessageIconPulse {
    0%,
    100% {
        transform:
            translateY(-50%)
            scale(0.92)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-50%)
            scale(1.12)
            rotate(8deg);
    }
}

@keyframes pgHexMessageLight {
    0%,
    55% {
        left: -30%;
    }

    85%,
    100% {
        left: 115%;
    }
}
/* =========================================
   لعبة الشبكة فقط: وسائل المساعدة الجانبية
   ========================================= */

#pg-hex-game-screen .pg-hex-side-helps {
    padding: 13px 10px;

    border: 2px solid rgba(106, 210, 255, 0.68);
    border-radius: 22px;

    background:
        linear-gradient(
            160deg,
            rgba(13, 47, 99, 0.96),
            rgba(6, 22, 63, 0.96)
        );

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(47, 182, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(8px);
}

/* اسم الفريق داخل صندوق المساعدة */
#pg-hex-game-screen .pg-hex-side-helps > strong {
    display: block;
    margin-bottom: 10px;

    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 900;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ترتيب أزرار المساعدة */
#pg-hex-game-screen .pg-hex-side-help-buttons {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* شكل زر المساعدة */
#pg-hex-game-screen .pg-hex-side-help-buttons button {
    position: relative;

    width: 48px;
    height: 48px;
    padding: 0;

    border: 2px solid rgba(133, 222, 255, 0.9);
    border-radius: 14px;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 35% 25%,
            #38bfff,
            #0875db 56%,
            #063783 100%
        );

    box-shadow:
        0 6px 0 #04295e,
        0 10px 16px rgba(0, 0, 0, 0.35),
        inset 0 2px 2px rgba(255, 255, 255, 0.5);

    font-size: 1.38rem;
    cursor: pointer;

    transition:
        translate 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

/* حركة الزر عند مرور الماوس */
#pg-hex-game-screen .pg-hex-side-help-buttons button:hover:not(:disabled) {
    translate: 0 -3px;
    filter:
        brightness(1.18)
        drop-shadow(0 0 7px rgba(63, 208, 255, 0.9));

    box-shadow:
        0 8px 0 #04295e,
        0 13px 20px rgba(0, 0, 0, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.6);
}

/* إحساس الضغط الحقيقي */
#pg-hex-game-screen .pg-hex-side-help-buttons button:active:not(:disabled) {
    translate: 0 3px;

    box-shadow:
        0 2px 0 #04295e,
        0 5px 8px rgba(0, 0, 0, 0.32);
}

/* المساعدة المستعملة */
#pg-hex-game-screen .pg-hex-side-help-buttons button:disabled {
    opacity: 0.34;
    filter: grayscale(0.9);
    cursor: not-allowed;
    box-shadow:
        0 3px 0 #25354f,
        inset 0 1px 2px rgba(255, 255, 255, 0.18);
}
/* =========================================
   لعبة الشبكة فقط: حركة دخول الصفحة
   ========================================= */

/* دخول بطاقات الفرق وحالة الدور */
#pg-hex-game-screen:not(.pg-hex-hidden)
.pg-hex-game-header {
    animation:
        pgHexHeaderEntrance 0.65s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* دخول شريط الرسالة بعد البطاقات */
#pg-hex-game-screen:not(.pg-hex-hidden)
.pg-hex-question-message {
    animation:
        pgHexMessageEntrance 0.65s
        0.14s
        cubic-bezier(0.2, 0.85, 0.3, 1.12)
        both;
}

/* دخول لوحة الشبكة */
#pg-hex-game-screen:not(.pg-hex-hidden)
.pg-hex-board-wrapper {
    animation:
        pgHexBoardEntrance 0.8s
        0.22s
        cubic-bezier(0.18, 0.88, 0.28, 1.15)
        both;
}

/* دخول وسائل المساعدة من الطرفين */
#pg-hex-game-screen:not(.pg-hex-hidden)
.pg-hex-team1-helps {
    animation:
        pgHexHelpEntranceRight 0.7s
        0.4s
        ease-out
        both;
}

#pg-hex-game-screen:not(.pg-hex-hidden)
.pg-hex-team2-helps {
    animation:
        pgHexHelpEntranceLeft 0.7s
        0.4s
        ease-out
        both;
}

@keyframes pgHexHeaderEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-35px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexMessageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-18px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexBoardEntrance {
    from {
        opacity: 0;
        transform:
            translateY(45px)
            scale(0.84);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }
}

@keyframes pgHexHelpEntranceRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pgHexHelpEntranceLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* =========================================
   لعبة الشبكة فقط: انتقال دور الفريق بنعومة
   ========================================= */

#pg-hex-game-screen .pg-hex-team {
    transition:
        transform 0.4s
            cubic-bezier(0.2, 0.85, 0.3, 1.2),
        opacity 0.4s ease,
        filter 0.4s ease,
        box-shadow 0.4s ease;
}

/* مؤشر صغير متحرك أسفل بطاقة الفريق */
#pg-hex-game-screen .pg-hex-team::after {
    content: "دوره الآن";

    position: absolute;
    right: 50%;
    bottom: -11px;

    min-width: 78px;
    padding: 4px 10px;

    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 20px;

    color: #10214c;
    background:
        linear-gradient(
            180deg,
            #fff4a8,
            #ffc932
        );

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(255, 207, 48, 0.6);

    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;

    opacity: 0;
    transform:
        translateX(50%)
        translateY(6px)
        scale(0.8);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

/* إظهار المؤشر على البطاقة المضيئة فقط */
#pg-hex-game-screen .pg-hex-team[style*="opacity: 1"]::after {
    opacity: 1;

    transform:
        translateX(50%)
        translateY(0)
        scale(1);

    animation:
        pgHexCurrentTurnBadge 1.5s
        ease-in-out infinite;
}

@keyframes pgHexCurrentTurnBadge {
    0%,
    100% {
        box-shadow:
            0 5px 10px rgba(0, 0, 0, 0.3),
            0 0 8px rgba(255, 207, 48, 0.55);
    }

    50% {
        box-shadow:
            0 5px 10px rgba(0, 0, 0, 0.3),
            0 0 19px rgba(255, 224, 92, 1);
    }
}
/* =========================================
   لعبة الشبكة فقط: مؤشرات اتجاه الفوز
   ========================================= */

#pg-hex-game-screen .pg-hex-border {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الأسهم الخضراء من الأعلى إلى الأسفل */
#pg-hex-game-screen .pg-hex-border-top::after {
    content: "▼  ▼  ▼";

    color: rgba(255, 255, 255, 0.94);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 14px;

    text-shadow:
        0 0 7px #ffffff,
        0 0 14px #38f78f;

    animation:
        pgHexGreenArrowDown 1.35s
        ease-in-out infinite;
}

#pg-hex-game-screen .pg-hex-border-bottom::after {
    content: "▲  ▲  ▲";

    color: rgba(255, 255, 255, 0.94);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 14px;

    text-shadow:
        0 0 7px #ffffff,
        0 0 14px #38f78f;

    animation:
        pgHexGreenArrowUp 1.35s
        ease-in-out infinite;
}

/* الأسهم الحمراء من اليمين إلى اليسار */
#pg-hex-game-screen .pg-hex-border-left::after {
    content: "▶\\A▶\\A▶";
    white-space: pre-line;

    color: rgba(255, 255, 255, 0.94);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 2.3;

    text-shadow:
        0 0 7px #ffffff,
        0 0 14px #ff4f6e;

    animation:
        pgHexRedArrowRight 1.35s
        ease-in-out infinite;
}

#pg-hex-game-screen .pg-hex-border-right::after {
    content: "◀\\A◀\\A◀";
    white-space: pre-line;

    color: rgba(255, 255, 255, 0.94);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 2.3;

    text-shadow:
        0 0 7px #ffffff,
        0 0 14px #ff4f6e;

    animation:
        pgHexRedArrowLeft 1.35s
        ease-in-out infinite;
}

@keyframes pgHexGreenArrowDown {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(-4px);
    }

    50% {
        opacity: 1;
        transform: translateY(5px);
    }
}

@keyframes pgHexGreenArrowUp {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(4px);
    }

    50% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

@keyframes pgHexRedArrowRight {
    0%,
    100% {
        opacity: 0.55;
        transform: translateX(-4px);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }
}

@keyframes pgHexRedArrowLeft {
    0%,
    100% {
        opacity: 0.55;
        transform: translateX(4px);
    }

    50% {
        opacity: 1;
        transform: translateX(-5px);
    }
}
/* =========================================
   لعبة الشبكة فقط: زر الرجوع
   ========================================= */

#pg-hex-game-screen .pg-hex-back-button {
    position: relative;

    align-self: center;
    min-width: 210px;
    padding: 12px 48px 12px 24px;

    overflow: hidden;

    border: 2px solid rgba(121, 220, 255, 0.78);
    border-radius: 50px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(18, 80, 145, 0.96),
            rgba(28, 38, 107, 0.96)
        );

    box-shadow:
        0 7px 0 #071b4b,
        0 12px 22px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;

    transition:
        translate 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease;
}

/* أيقونة الرجوع */
#pg-hex-game-screen .pg-hex-back-button::before {
    content: "↩";

    position: absolute;
    top: 50%;
    right: 17px;

    color: #ffe052;
    font-size: 1.45rem;
    line-height: 1;

    filter:
        drop-shadow(0 0 5px rgba(255, 218, 58, 0.75));

    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

/* لمعة تمر داخل الزر */
#pg-hex-game-screen .pg-hex-back-button::after {
    content: "";

    position: absolute;
    top: -70%;
    left: -35%;

    width: 24%;
    height: 240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.42),
            transparent
        );

    transform: rotate(18deg);
    transition: left 0.55s ease;
}

#pg-hex-game-screen .pg-hex-back-button:hover {
    translate: 0 -3px;
    filter:
        brightness(1.18)
        drop-shadow(0 0 8px rgba(61, 198, 255, 0.65));

    box-shadow:
        0 9px 0 #071b4b,
        0 15px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#pg-hex-game-screen .pg-hex-back-button:hover::before {
    transform:
        translateY(-50%)
        rotate(-18deg)
        scale(1.15);
}

#pg-hex-game-screen .pg-hex-back-button:hover::after {
    left: 120%;
}

#pg-hex-game-screen .pg-hex-back-button:active {
    translate: 0 3px;

    box-shadow:
        0 3px 0 #071b4b,
        0 6px 10px rgba(0, 0, 0, 0.35);
}
/* =========================================
   لعبة الشبكة فقط: زخارف داخل إطار اللوحة
   ========================================= */

#pg-hex-game-screen .pg-hex-board-wrapper::before,
#pg-hex-game-screen .pg-hex-board-wrapper::after {
    position: absolute;
    z-index: 1;

    color: rgba(105, 211, 255, 0.1);
    line-height: 1;

    pointer-events: none;

    filter:
        drop-shadow(0 0 10px rgba(57, 191, 255, 0.25));
}

/* زخرفة الزاوية العلوية */
#pg-hex-game-screen .pg-hex-board-wrapper::before {
    content: "⬡";

    top: 13%;
    left: 4%;

    font-size: 7rem;

    animation:
        pgHexBoardDecorationOne 8s
        ease-in-out infinite;
}

/* زخرفة الزاوية السفلية */
#pg-hex-game-screen .pg-hex-board-wrapper::after {
    content: "⬢";

    right: 4%;
    bottom: 11%;

    color: rgba(255, 209, 61, 0.09);
    font-size: 6rem;

    filter:
        drop-shadow(0 0 10px rgba(255, 205, 45, 0.24));

    animation:
        pgHexBoardDecorationTwo 7s
        ease-in-out infinite;
}

/* إبقاء الشبكة والأطراف فوق الزخارف */
#pg-hex-game-screen .pg-hex-board,
#pg-hex-game-screen .pg-hex-border {
    z-index: 2;
}

@keyframes pgHexBoardDecorationOne {
    0%,
    100% {
        opacity: 0.35;
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(0.9);
    }

    50% {
        opacity: 0.85;
        transform:
            translate(12px, 8px)
            rotate(25deg)
            scale(1.08);
    }
}

@keyframes pgHexBoardDecorationTwo {
    0%,
    100% {
        opacity: 0.32;
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(0.92);
    }

    50% {
        opacity: 0.78;
        transform:
            translate(-12px, -8px)
            rotate(-28deg)
            scale(1.08);
    }
}
/* =========================================
   تصحيح نبضة الخلية المختارة في الشبكة
   ========================================= */

#pg-hex-game-screen
button.pg-hex-cell.pg-hex-cell-selected {
    color: #10204a;

    filter:
        drop-shadow(0 8px 6px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 12px rgba(255, 207, 47, 0.95));

    animation:
        pgHexSelectedCellPulse 1.15s
        ease-in-out infinite;
}
/* حذف شارة "دوره الآن" من بطاقات فرق الشبكة */
#pg-hex-game-screen .pg-hex-team::after {
    display: none !important;
    content: none !important;
}
/* حذف مؤشرات الاتجاه المتحركة من أطراف الشبكة */
#pg-hex-game-screen .pg-hex-border::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}
/* إصلاح تداخل أطراف الألوان فوق خلايا الشبكة */
#pg-hex-game-screen .pg-hex-border {
    z-index: 1 !important;
}

#pg-hex-game-screen .pg-hex-board {
    z-index: 3 !important;
}
/* إصلاح ترتيب زوايا ألوان شبكة اللعب */
#pg-hex-game-screen .pg-hex-border-left,
#pg-hex-game-screen .pg-hex-border-right {
    z-index: 1 !important;
}

#pg-hex-game-screen .pg-hex-border-top,
#pg-hex-game-screen .pg-hex-border-bottom {
    z-index: 2 !important;
}

/* إعادة ارتفاع الأخضر العلوي مثل الأخضر السفلي */
#pg-hex-game-screen .pg-hex-border-top {
    height: var(--pg-corner-height) !important;
}

#pg-hex-game-screen .pg-hex-board {
    z-index: 3 !important;
}
/* توحيد طول الزوايا المائلة يمينًا ويسارًا */
#pg-hex-game-screen .pg-hex-board-wrapper {
    --pg-corner-inset: 12.5%;
    --pg-right-corner-inset: 12.5%;
}
/* مطابقة الزوايا مع الشكل المتدرج الحقيقي للشبكة */
#pg-hex-game-screen .pg-hex-board-wrapper {
    --pg-corner-inset: 12.5%;
    --pg-right-corner-inset: 19.5%;
}
/* توسيط وسائل المساعدة داخل الصندوق */
#pg-hex-game-screen .pg-hex-side-help-buttons {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#pg-hex-game-screen .pg-hex-side-help-buttons button {
    margin-right: auto !important;
    margin-left: auto !important;
}
/* =========================================
   الأقرب يكسب في لعبة الشبكة فقط:
   شاشة كاملة وإخفاء وسائل المساعدة
   ========================================= */

#pg-hex-question-overlay.pg-hex-closest-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 24000 !important;

    width: 100vw !important;
    height: 100dvh !important;
    padding: 18px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #081b46,
            #133b78 52%,
            #301a68
        ) !important;
}

/* تكبير بطاقة الفئة لتملأ الشاشة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* إخفاء وسائل المساعدة أثناء الأقرب يكسب */
#pg-hex-game-screen:has(
    #pg-hex-question-overlay.pg-hex-closest-mode:not(.pg-hex-hidden)
)
.pg-hex-side-helps {
    display: none !important;
}
/* =========================================
   الأقرب يكسب في الشبكة:
   المؤقت واسم الفريق أعلى اليسار
   ========================================= */

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    position: relative !important;
}

/* إخفاء رقم الخلية */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* إلغاء تأثير الهيدر القديم على توزيع العناصر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-header {
    position: static !important;
}

/* وضع المؤقت أعلى اليسار */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 26px !important;
    left: 30px !important;
    right: auto !important;
    z-index: 20 !important;

    margin: 0 !important;
}

/* وضع اسم الفريق أسفل المؤقت */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-team-name {
    position: absolute !important;
    top: 112px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 20 !important;

    min-width: 125px;
    padding: 9px 15px;

    border: 2px solid rgba(107, 216, 255, 0.85);
    border-radius: 18px;

    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            #168bd0,
            #075aa5
        );

    box-shadow:
        0 6px 0 #063a73,
        0 10px 18px rgba(0, 0, 0, 0.3);

    text-align: center;
    font-weight: 900;
}
/* =========================================
   الأقرب يكسب في الشبكة:
   المؤقت واسم الفريق أعلى اليسار
   ========================================= */

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    position: relative !important;
}

/* إخفاء رقم الخلية */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* إلغاء تأثير الهيدر القديم على توزيع العناصر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-header {
    position: static !important;
}

/* وضع المؤقت أعلى اليسار */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 26px !important;
    left: 30px !important;
    right: auto !important;
    z-index: 20 !important;

    margin: 0 !important;
}

/* وضع اسم الفريق أسفل المؤقت */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-team-name {
    position: absolute !important;
    top: 112px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 20 !important;

    min-width: 125px;
    padding: 9px 15px;

    border: 2px solid rgba(107, 216, 255, 0.85);
    border-radius: 18px;

    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            #168bd0,
            #075aa5
        );

    box-shadow:
        0 6px 0 #063a73,
        0 10px 18px rgba(0, 0, 0, 0.3);

    text-align: center;
    font-weight: 900;
}
/* =========================================
   الأقرب يكسب في الشبكة:
   تصميم السؤال وصندوق التخمينات
   ========================================= */

/* نص السؤال */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-text {
    width: min(780px, 70vw);
    margin: 38px auto 20px !important;
    padding: 20px 30px;

    border: 2px solid rgba(112, 224, 255, 0.72);
    border-radius: 26px;

    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            rgba(14, 76, 139, 0.95),
            rgba(39, 43, 125, 0.95)
        );

    box-shadow:
        0 10px 0 rgba(4, 24, 68, 0.8),
        0 16px 30px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);

    font-size: clamp(25px, 2.5vw, 40px) !important;
    line-height: 1.45 !important;
    text-align: center;

    text-shadow:
        0 3px 5px rgba(0, 0, 0, 0.45);
}

/* صندوق التخمينات */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-box {
    width: min(760px, 72vw);
    margin: 22px auto 0 !important;
    padding: 22px 26px;

    border: 2px solid rgba(255, 215, 75, 0.8);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 28, 73, 0.96),
            rgba(19, 53, 110, 0.94)
        );

    box-shadow:
        0 12px 0 rgba(4, 17, 52, 0.9),
        0 20px 35px rgba(0, 0, 0, 0.38),
        0 0 25px rgba(255, 203, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* بطاقتا الفريقين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    padding: 17px;

    border: 2px solid rgba(109, 215, 255, 0.5);
    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 91, 157, 0.75),
            rgba(10, 40, 92, 0.88)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 18px rgba(0, 0, 0, 0.25);
}

/* أسماء الفريقين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label span {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    text-align: center;
}

/* حقول إدخال التخمين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs input {
    width: 100% !important;
    height: 58px !important;
    padding: 10px 16px !important;

    border: 3px solid #72dcff !important;
    border-radius: 17px !important;
    outline: none;

    color: #102451 !important;
    background: #ffffff !important;

    box-shadow:
        inset 0 3px 7px rgba(10, 35, 75, 0.14),
        0 6px 14px rgba(0, 0, 0, 0.23);

    font-family: inherit;
    font-size: 1.45rem !important;
    font-weight: 900;
    text-align: center;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs input:focus {
    border-color: #ffd54a !important;

    box-shadow:
        0 0 0 5px rgba(255, 213, 74, 0.18),
        0 0 20px rgba(255, 203, 50, 0.45);

    transform: translateY(-2px);
}
/* =========================================
   الأقرب يكسب في الشبكة:
   زر التثبيت ورسالة النتيجة
   ========================================= */

/* زر تثبيت التخمينين */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit {
    position: relative;

    display: block;
    min-width: 260px;
    margin: 22px auto 5px !important;
    padding: 14px 30px;

    overflow: hidden;

    border: 3px solid #fff2a8;
    border-radius: 20px;

    color: #15315f;
    background:
        linear-gradient(
            180deg,
            #fff27a,
            #ffc52f
        );

    box-shadow:
        0 8px 0 #d67b00,
        0 14px 22px rgba(0, 0, 0, 0.34),
        inset 0 2px 2px rgba(255, 255, 255, 0.75);

    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    cursor: pointer;

    transition:
        translate 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

/* أيقونة الهدف */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit::before {
    content: "🎯";
    margin-left: 9px;
    font-size: 1.35rem;
}

/* لمعة تمر فوق الزر */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit::after {
    content: "";

    position: absolute;
    top: -70%;
    left: -30%;

    width: 22%;
    height: 240%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.65),
            transparent
        );

    transform: rotate(18deg);
    transition: left 0.55s ease;
}

#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit:hover:not(:disabled) {
    translate: 0 -3px;
    filter: brightness(1.1);

    box-shadow:
        0 10px 0 #d67b00,
        0 17px 26px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(255, 203, 42, 0.45);
}

#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit:hover::after {
    left: 120%;
}

#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit:active:not(:disabled) {
    translate: 0 5px;

    box-shadow:
        0 3px 0 #d67b00,
        0 7px 12px rgba(0, 0, 0, 0.32);
}

/* رسالة النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-result:not(.pg-hex-hidden) {
    display: block !important;
    width: min(570px, 90%);
    margin: 20px auto 2px !important;
    padding: 15px 22px;

    border: 2px solid #6ef0ab;
    border-radius: 18px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(7, 130, 76, 0.96),
            rgba(9, 84, 103, 0.96)
        );

    box-shadow:
        0 7px 0 #064a42,
        0 12px 22px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(62, 238, 153, 0.28);

    font-size: 1.12rem;
    font-weight: 900;
    text-align: center;

    animation:
        pgHexClosestResultEntrance 0.55s
        cubic-bezier(0.2, 0.85, 0.3, 1.2)
        both;
}

@keyframes pgHexClosestResultEntrance {
    from {
        opacity: 0;
        transform:
            translateY(20px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* =========================================
   الأقرب يكسب في الشبكة:
   تمييز بطاقتي الفريقين بالألوان
   ========================================= */

/* بطاقة الفريق الأول */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:first-child {
    border-color: rgba(255, 103, 125, 0.9);

    background:
        linear-gradient(
            145deg,
            rgba(190, 27, 57, 0.92),
            rgba(92, 15, 45, 0.96)
        );

    box-shadow:
        0 7px 0 rgba(81, 8, 28, 0.9),
        0 12px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(255, 50, 85, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* بطاقة الفريق الثاني */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:nth-child(2) {
    border-color: rgba(77, 241, 149, 0.9);

    background:
        linear-gradient(
            145deg,
            rgba(12, 148, 78, 0.94),
            rgba(5, 74, 57, 0.97)
        );

    box-shadow:
        0 7px 0 rgba(3, 61, 43, 0.92),
        0 12px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(40, 232, 131, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* حقل الفريق الأول */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:first-child input {
    border-color: #ff8498 !important;
}

/* حقل الفريق الثاني */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:nth-child(2) input {
    border-color: #63eaa2 !important;
}

/* تركيز حقل الفريق الأول */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:first-child input:focus {
    border-color: #ffcf3d !important;

    box-shadow:
        0 0 0 5px rgba(255, 207, 61, 0.18),
        0 0 20px rgba(255, 79, 110, 0.55);
}

/* تركيز حقل الفريق الثاني */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:nth-child(2) input:focus {
    border-color: #ffcf3d !important;

    box-shadow:
        0 0 0 5px rgba(255, 207, 61, 0.18),
        0 0 20px rgba(54, 238, 142, 0.5);
}
 /* =========================================
   الأقرب يكسب في الشبكة:
   حركات دخول عناصر الصفحة
   ========================================= */

/* دخول السؤال من الأعلى */
#pg-hex-question-overlay.pg-hex-closest-mode:not(.pg-hex-hidden)
#pg-hex-question-text {
    animation:
        pgHexClosestQuestionEntrance 0.65s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* دخول بطاقة الفريق الأول */
#pg-hex-question-overlay.pg-hex-closest-mode:not(.pg-hex-hidden)
.pg-hex-closest-inputs label:first-child {
    animation:
        pgHexClosestRedCardEntrance 0.65s
        0.15s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* دخول بطاقة الفريق الثاني */
#pg-hex-question-overlay.pg-hex-closest-mode:not(.pg-hex-hidden)
.pg-hex-closest-inputs label:nth-child(2) {
    animation:
        pgHexClosestGreenCardEntrance 0.65s
        0.25s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* دخول زر التثبيت */
#pg-hex-question-overlay.pg-hex-closest-mode:not(.pg-hex-hidden)
#pg-hex-closest-submit {
    animation:
        pgHexClosestButtonEntrance 0.55s
        0.38s
        ease-out
        both;
}

@keyframes pgHexClosestQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-30px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexClosestRedCardEntrance {
    from {
        opacity: 0;
        transform:
            translateX(70px)
            rotate(4deg)
            scale(0.85);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}

@keyframes pgHexClosestGreenCardEntrance {
    from {
        opacity: 0;
        transform:
            translateX(-70px)
            rotate(-4deg)
            scale(0.85);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }
}

@keyframes pgHexClosestButtonEntrance {
    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.8);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* الأقرب يكسب في الشبكة فقط:
   منع اختفاء العناصر عند قِصر الشاشة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* الأقرب يكسب في الشبكة فقط:
   إخفاء المؤقت واسم الفريق عند ظهور النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer,
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}
/* الأقرب يكسب في الشبكة فقط:
   إخفاء بطاقتي التخمين بعد تثبيت النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-closest-inputs {
    display: none !important;
}
/* الأقرب يكسب في الشبكة فقط:
   بطاقة الإجابة الصحيحة في صفحة النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: min(620px, 82vw);
    min-height: 115px;
    margin: 28px auto 18px !important;
    padding: 20px 30px !important;

    border: 3px solid #8affbd !important;
    border-radius: 26px !important;

    color: #ffffff !important;
    background:
        linear-gradient(
            145deg,
            #12a760,
            #087144
        ) !important;

    box-shadow:
        0 9px 0 #045032,
        0 17px 30px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(70, 255, 157, 0.3) !important;

    font-size: clamp(24px, 3vw, 40px) !important;
    font-weight: 900;
    text-align: center;
}
/* الأقرب يكسب في الشبكة فقط:
   حركة ظهور بطاقة الإجابة الصحيحة */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    animation:
        pgHexClosestAnswerEntrance 0.65s
        cubic-bezier(0.2, 0.9, 0.3, 1.25)
        both;
}

@keyframes pgHexClosestAnswerEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-22px)
            scale(0.82);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==================================================
   اللمسات النهائية لفئة الأقرب يكسب داخل الشبكة فقط
   ================================================== */

/* منع الحواف والحشوات من زيادة عرض العناصر */
#pg-hex-question-overlay.pg-hex-closest-mode *,
#pg-hex-question-overlay.pg-hex-closest-mode *::before,
#pg-hex-question-overlay.pg-hex-closest-mode *::after {
    box-sizing: border-box;
}

/* ترتيب المسافات داخل بطاقة الشاشة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    padding: 22px 28px 32px !important;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(105, 211, 255, 0.8)
        rgba(4, 24, 65, 0.3);
}

/* شكل شريط التمرير عند الحاجة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::-webkit-scrollbar {
    width: 9px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::-webkit-scrollbar-track {
    background: rgba(4, 24, 65, 0.3);
    border-radius: 20px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background:
        linear-gradient(
            #6fe0ff,
            #4d7cff
        );
}

/* حركة دخول السؤال */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-question-text {
    animation:
        pgHexClosestQuestionEntrance 0.6s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* حركة دخول بطاقة الفريق الأحمر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:first-child {
    animation:
        pgHexClosestRedCardEntrance 0.65s
        0.12s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* حركة دخول بطاقة الفريق الأخضر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs label:nth-child(2) {
    animation:
        pgHexClosestGreenCardEntrance 0.65s
        0.22s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* حركة دخول زر تثبيت التخمينين */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit {
    animation:
        pgHexClosestButtonEntrance 0.55s
        0.32s
        cubic-bezier(0.2, 0.85, 0.3, 1.15)
        both;
}

/* تحسين الحقول عند كتابة التخمين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-inputs input:not(:placeholder-shown) {
    color: #071c45 !important;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #eaf8ff
        ) !important;

    box-shadow:
        inset 0 3px 7px rgba(10, 35, 75, 0.12),
        0 0 18px rgba(255, 255, 255, 0.25);
}

/* تحسين ترتيب صفحة النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    width: min(680px, 72vw);
    margin-top: 20px !important;
    margin-bottom: 14px !important;
    padding: 14px 24px;

    font-size: clamp(21px, 2vw, 31px) !important;
}

/* تصغير صندوق التخمينات بعد ظهور النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    width: min(680px, 82vw);
    margin-top: 14px !important;
    padding: 16px 22px 22px;
}

/* جعل رسالة النتيجة أوضح */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-closest-result {
    width: min(600px, 96%);
    margin: 4px auto 18px !important;
    padding: 17px 24px;

    font-size: clamp(17px, 1.65vw, 23px);
    line-height: 1.6;
}

/* تحويل زر العودة إلى الشبكة إلى لون أزرق */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    min-width: 250px;
    margin: 15px auto 5px !important;

    border-color: #bdefff;
    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            #269de2,
            #0962b2
        );

    box-shadow:
        0 8px 0 #06427e,
        0 14px 24px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(49, 176, 255, 0.3);
}

/* تغيير أيقونة الزر عند تحوله إلى العودة للشبكة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-closest-submit::before {
    content: "↩️";
}

/* حركات الدخول */
@keyframes pgHexClosestQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexClosestRedCardEntrance {
    from {
        opacity: 0;
        transform:
            translateX(45px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes pgHexClosestGreenCardEntrance {
    from {
        opacity: 0;
        transform:
            translateX(-45px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}

@keyframes pgHexClosestButtonEntrance {
    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ضبط الشاشات المتوسطة والقصيرة */
@media (max-height: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode {
        padding: 10px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-question-card {
        padding-top: 15px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-question-text {
        margin-top: 18px !important;
        margin-bottom: 13px !important;
        padding: 13px 22px;

        font-size: clamp(21px, 2.2vw, 31px) !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-box {
        margin-top: 14px !important;
        padding: 15px 20px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-inputs label {
        padding: 12px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-inputs input {
        height: 50px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-submit {
        margin-top: 16px !important;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* ضبط الشاشات الضيقة */
@media (max-width: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode {
        padding: 8px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-question-card {
        padding:
            135px
            12px
            25px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-question-timer {
        top: 16px !important;
        left: 18px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-question-team-name {
        top: 98px !important;
        left: 10px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-question-text,
    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-box {
        width: 100%;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-inputs {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-submit {
        width: 100%;
        min-width: 0;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        width: 100%;
        min-height: 95px;
        padding: 16px 18px !important;
    }
}

/* احترام إعداد تقليل الحركة في الجهاز */
@media (prefers-reduced-motion: reduce) {
    #pg-hex-question-overlay.pg-hex-closest-mode *,
    #pg-hex-question-overlay.pg-hex-closest-mode *::before,
    #pg-hex-question-overlay.pg-hex-closest-mode *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ==================================================
   مسطرة الأقرب يكسب المتحركة داخل الشبكة فقط
   ================================================== */

/* إخفاء نتيجة المسطرة قبل تثبيت التخمينين */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-ruler-result.pg-hex-hidden {
    display: none !important;
}

/* حاوية نتيجة المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler-result:not(.pg-hex-hidden) {
    display: block !important;
    width: 100%;
    margin: 8px auto 5px;

    animation:
        pgHexClosestRulerResultEntrance
        0.55s
        ease
        both;
}

/* الصندوق المحيط بالمسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler-wrap {
    width: 100%;
    margin: 0 auto;
    padding:
        112px
        58px
        108px;

    overflow: visible;

    border: 2px solid rgba(112, 211, 255, 0.42);
    border-radius: 23px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(30, 111, 190, 0.25),
            transparent 62%
        ),
        linear-gradient(
            145deg,
            rgba(4, 25, 66, 0.96),
            rgba(12, 48, 98, 0.94)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 10px 24px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(67, 182, 255, 0.12);
}

/* جسم المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler {
    position: relative;

    width: 100%;
    height: 38px;

    border-radius: 9px;

    background:
        repeating-linear-gradient(
            to right,
            transparent 0,
            transparent calc(5% - 1px),
            rgba(174, 222, 255, 0.5)
                calc(5% - 1px),
            rgba(174, 222, 255, 0.5) 5%
        );

    animation:
        pgHexClosestRulerReveal
        0.75s
        ease
        both;
}

/* خط المسطرة الرئيسي */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler-line {
    position: absolute;
    top: 17px;
    right: 0;
    left: 0;

    height: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2fcf91,
            #d7efff 47%,
            #ffe266 50%,
            #d7efff 53%,
            #ff4969
        );

    box-shadow:
        0 0 14px rgba(104, 199, 255, 0.65),
        0 0 5px rgba(255, 255, 255, 0.6);
}

/* جميع مؤشرات المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker {
    --marker-position: 50%;
    --marker-color: #ffffff;

    position: absolute;
    top: 19px;
    left: var(--marker-position);
    z-index: 4;

    display: flex;
    align-items: center;
    flex-direction: column;

    width: 0;

    color: var(--marker-color);

    transform: translateX(-50%);

    transition:
        left 2.5s
        cubic-bezier(0.18, 0.82, 0.22, 1),
        opacity 0.45s ease,
        filter 0.45s ease;
}

/* الدائرة الموجودة على خط المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker i {
    position: absolute;
    top: -13px;

    display: block;

    width: 21px;
    height: 21px;

    border: 4px solid #ffffff;
    border-radius: 50%;

    background: var(--marker-color);

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.09),
        0 0 20px var(--marker-color);

    transform: scale(0);

    animation:
        pgHexClosestMarkerPop
        0.45s
        cubic-bezier(0.2, 1.6, 0.4, 1)
        0.1s
        forwards;
}

/* قيمة التخمين فوق أو أسفل المؤشر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker-value {
    position: absolute;

    min-width: max-content;
    padding: 7px 12px;

    border: 2px solid currentColor;
    border-radius: 11px;

    color: #ffffff;
    background: rgba(2, 18, 49, 0.97);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.38),
        0 0 13px color-mix(
            in srgb,
            var(--marker-color) 45%,
            transparent
        );

    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

/* اسم الفريق */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker small {
    position: absolute;

    min-width: max-content;
    max-width: 170px;
    padding: 5px 9px;

    overflow: hidden;

    border: 1px solid
        color-mix(
            in srgb,
            var(--marker-color) 55%,
            transparent
        );
    border-radius: 9px;

    color: #ffffff;
    background: rgba(2, 20, 53, 0.94);

    font-family: inherit;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* مؤشر الفريق الأحمر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker {
    --marker-color: #ff4969;
    z-index: 5;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker
.pg-hex-closest-marker-value {
    bottom: 38px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker
.pg-hex-closest-marker-value::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 50%;

    border: 7px solid transparent;
    border-top-color: #ff4969;

    transform: translateX(-50%);
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker small {
    top: 34px;
}

/* مؤشر الفريق الأخضر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker {
    --marker-color: #2ddd8f;
    z-index: 5;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker
.pg-hex-closest-marker-value {
    top: 42px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker
.pg-hex-closest-marker-value::before {
    content: "";

    position: absolute;
    bottom: 100%;
    left: 50%;

    border: 7px solid transparent;
    border-bottom-color: #2ddd8f;

    transform: translateX(-50%);
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker small {
    top: 86px;
}

/* مؤشر الإجابة الصحيحة في منتصف المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker {
    --marker-color: #ffd83d;

    left: 50%;
    z-index: 8;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker i {
    top: -18px;

    width: 30px;
    height: 30px;

    border: 5px solid #fff8c2;

    background:
        radial-gradient(
            circle,
            #ffffff 0 22%,
            #ffd83d 24% 52%,
            #ff9f1c 54% 100%
        );

    box-shadow:
        0 0 0 7px rgba(255, 216, 61, 0.15),
        0 0 32px rgba(255, 216, 61, 0.95);

    animation:
        pgHexClosestAnswerMarkerPulse
        1.15s
        ease-in-out
        infinite;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker
.pg-hex-closest-marker-value {
    bottom: 78px;

    border-color: #ffe16a;

    color: #fff8c7;
    background:
        linear-gradient(
            145deg,
            #8b5a00,
            #513300
        );

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 23px rgba(255, 207, 48, 0.55);
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker
.pg-hex-closest-marker-value::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 50%;

    border: 7px solid transparent;
    border-top-color: #ffd83d;

    transform: translateX(-50%);
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker small {
    top: 34px;

    border-color: rgba(255, 225, 87, 0.8);

    color: #fff0a0;
    background: rgba(91, 55, 0, 0.96);
}

/* المؤشر الذي ما زال يتحرك */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.travelling i {
    animation:
        pgHexClosestMarkerPop
        0.45s
        cubic-bezier(0.2, 1.6, 0.4, 1)
        forwards,
        pgHexClosestTravellingGlow
        0.7s
        ease-in-out
        0.45s
        infinite;
}

/* الفريق الأقرب */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.winner {
    z-index: 10;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.winner i {
    animation:
        pgHexClosestWinnerGlow
        0.85s
        ease-in-out
        infinite;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.winner
.pg-hex-closest-marker-value,
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.winner small {
    transform: scale(1.12);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 24px var(--marker-color);
}

/* الفريق الأبعد */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker.loser {
    z-index: 2;

    opacity: 0.42;
    filter: grayscale(0.7);
}

/* بطاقتا فرق التخمين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-differences {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
    margin-top: 16px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    padding: 12px 16px;

    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 15px;

    color: #ffffff;
    background: rgba(3, 25, 65, 0.88);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 6px 15px rgba(0, 0, 0, 0.22);

    font-weight: 900;
}

/* بطاقة فرق الأحمر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference.red-difference {
    border-color: rgba(255, 73, 105, 0.65);

    background:
        linear-gradient(
            145deg,
            rgba(133, 19, 49, 0.85),
            rgba(66, 12, 35, 0.92)
        );
}

/* بطاقة فرق الأخضر */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference.green-difference {
    border-color: rgba(45, 221, 143, 0.65);

    background:
        linear-gradient(
            145deg,
            rgba(7, 118, 67, 0.86),
            rgba(3, 65, 49, 0.93)
        );
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference span {
    overflow: hidden;

    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference strong {
    direction: ltr;

    font-size: 19px;
    white-space: nowrap;
}

/* عند ظهور المسطرة نزيد عرض صندوق النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    width: min(900px, 82vw);
}

/* إبقاء زر العودة أسفل المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    margin-top: 19px !important;
}

/* حركات المسطرة */
@keyframes pgHexClosestRulerResultEntrance {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexClosestRulerReveal {
    from {
        opacity: 0;
        transform: scaleX(0.12);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes pgHexClosestMarkerPop {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pgHexClosestTravellingGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 0.08),
            0 0 17px var(--marker-color);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(255, 255, 255, 0.04),
            0 0 35px var(--marker-color);
    }
}

@keyframes pgHexClosestWinnerGlow {
    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 6px rgba(255, 255, 255, 0.1),
            0 0 20px var(--marker-color);
    }

    50% {
        transform: scale(1.35);

        box-shadow:
            0 0 0 10px rgba(255, 255, 255, 0.05),
            0 0 38px var(--marker-color);
    }
}

@keyframes pgHexClosestAnswerMarkerPulse {
    0%,
    100% {
        transform: scale(1);

        box-shadow:
            0 0 0 7px rgba(255, 216, 61, 0.15),
            0 0 28px rgba(255, 216, 61, 0.82);
    }

    50% {
        transform: scale(1.18);

        box-shadow:
            0 0 0 11px rgba(255, 216, 61, 0.08),
            0 0 42px rgba(255, 216, 61, 1);
    }
}

/* ضبط المسطرة على الشاشات القصيرة */
@media (max-height: 820px) {
    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-ruler-wrap {
        padding:
            100px
            45px
            96px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-differences {
        margin-top: 12px;
    }
}

/* ضبط المسطرة على الشاشات الضيقة */
@media (max-width: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        width: 100%;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-ruler-wrap {
        padding:
            105px
            28px
            100px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-marker-value {
        padding: 6px 8px;
        font-size: 13px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-marker small {
        max-width: 105px;
        font-size: 10px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-differences {
        grid-template-columns: 1fr;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   صفحة كاملة بلا Scroll + إبطاء حركة المسطرة
   ================================================== */

/* منع التمرير نهائيًا داخل صفحة الأقرب يكسب */
#pg-hex-question-overlay.pg-hex-closest-mode,
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    overflow: hidden !important;
}

/* توزيع الصفحة ضمن ارتفاع الشاشة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    height: 100% !important;
    padding:
        16px
        25px
        18px !important;
}

/* تصغير المسافات عند ظهور النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    width: min(720px, 70vw);
    margin:
        8px
        auto
        9px !important;
    padding: 10px 22px;

    border-radius: 20px;

    font-size: clamp(
        20px,
        1.8vw,
        29px
    ) !important;
    line-height: 1.35 !important;
}

/* ضغط صندوق النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    width: min(920px, 82vw);
    margin: 7px auto 0 !important;
    padding:
        10px
        18px
        12px !important;

    border-radius: 22px;
}

/* تقليل المساحات فوق المسطرة وتحتها */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler-wrap {
    padding:
        82px
        48px
        82px !important;

    border-radius: 18px;
}

/* تقليل المسافة حول بطاقتي الفروق */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-differences {
    gap: 12px;
    margin-top: 9px;
}

#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-difference {
    min-height: 42px;
    padding: 8px 14px;
}

/* ضغط رسالة النتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-result:not(.pg-hex-hidden) {
    margin:
        8px
        auto
        2px !important;
    padding: 9px 17px;

    font-size: clamp(
        15px,
        1.35vw,
        19px
    );
    line-height: 1.4;
}

/* ضغط زر العودة إلى الشبكة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    min-width: 230px;
    margin:
        9px
        auto
        3px !important;
    padding: 9px 24px;

    border-radius: 16px;
    font-size: 1rem;
}

/* ضغط بطاقة الإجابة الخضراء */
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(620px, 72vw);
    min-height: 68px;
    margin:
        9px
        auto
        2px !important;
    padding:
        10px
        22px !important;

    border-radius: 19px !important;

    font-size: clamp(
        20px,
        2vw,
        29px
    ) !important;
}

/* إبطاء حركة مؤشري الفريقين */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker {
    transition:
        left 4s
        cubic-bezier(0.18, 0.72, 0.22, 1),
        opacity 0.45s ease,
        filter 0.45s ease !important;
}

/* ضبط إضافي للشاشات القصيرة */
@media (max-height: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode {
        padding: 7px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-question-card {
        padding:
            9px
            20px
            11px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-question-text {
        margin:
            4px
            auto
            6px !important;
        padding: 7px 18px;

        font-size: clamp(
            18px,
            1.65vw,
            25px
        ) !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        margin-top: 4px !important;
        padding:
            7px
            15px
            9px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-ruler-wrap {
        padding:
            75px
            42px
            76px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-differences {
        margin-top: 6px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-difference {
        min-height: 37px;
        padding: 6px 12px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-submit {
        margin-top: 6px !important;
        padding:
            7px
            20px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-closest-result:not(.pg-hex-hidden) {
        margin-top: 6px !important;
        padding: 7px 15px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        min-height: 55px;
        margin-top: 6px !important;
        padding:
            7px
            18px !important;

        font-size: clamp(
            18px,
            1.75vw,
            25px
        ) !important;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   توفير مساحة إضافية في صفحة النتيجة
   ================================================== */

/* إخفاء السؤال عند ظهور المسطرة والنتيجة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-question-text {
    display: none !important;
}

/* إخفاء جملة الفريق الأقرب */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-result {
    display: none !important;
}

/* وضع زر العودة في أعلى يمين الصفحة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    position: absolute !important;
    top: 22px !important;
    right: 28px !important;
    left: auto !important;
    z-index: 40;

    width: auto !important;
    min-width: 210px;
    margin: 0 !important;
    padding: 10px 22px;
}

/* استغلال المساحة الجديدة لتوسيط المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    margin:
        65px
        auto
        0 !important;
}

/* ضبط زر العودة في الشاشات الضيقة */
@media (max-width: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-submit {
        top: 14px !important;
        right: 14px !important;

        width: auto !important;
        min-width: 175px;
        padding: 8px 14px;

        font-size: 14px;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        margin-top: 58px !important;
    }
}
/* ==================================================
   إصلاح تداخلات صفحة مسطرة الأقرب يكسب
   داخل الشبكة فقط
   ================================================== */

/* إخفاء بطاقة الإجابة السفلية المكررة؛
   الإجابة موجودة أصلًا في منتصف المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-answer-area {
    display: none !important;
}

/* رفع المسطرة بعد إخفاء بطاقتي التخمين */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    width: min(980px, 82vw);
    margin:
        72px
        auto
        0 !important;
    padding:
        14px
        18px
        12px !important;
}

/* مساحة مناسبة حول المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-ruler-wrap {
    padding:
        105px
        55px
        105px !important;
}

/* نقل اسم الفريق الأحمر إلى أعلى قيمة تخمينه */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker small {
    top: auto !important;
    bottom: 82px !important;
}

/* إبقاء قيمة الفريق الأحمر فوق الخط */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-red-marker
.pg-hex-closest-marker-value {
    top: auto !important;
    bottom: 38px !important;
}

/* قيمة الفريق الأخضر أسفل الخط */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker
.pg-hex-closest-marker-value {
    top: 42px !important;
    bottom: auto !important;
}

/* اسم الفريق الأخضر أسفل قيمة تخمينه */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-green-marker small {
    top: 88px !important;
    bottom: auto !important;
}

/* إبراز قيمة الإجابة الصحيحة في منتصف المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker
.pg-hex-closest-marker-value {
    bottom: 72px !important;

    padding:
        8px
        15px;

    font-size: 19px;
}

/* جعل عنوان الإجابة الصحيحة أسفل المؤشر مباشرة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker small {
    top: 38px !important;
    bottom: auto !important;
}

/* منع أسماء الفرق من تغطية بعضها */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-marker small {
    max-width: 145px;
}

/* ضبط الشاشات القصيرة دون Scroll */
@media (max-height: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        margin-top: 62px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode
    .pg-hex-closest-ruler-wrap {
        padding:
            94px
            48px
            96px !important;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   خلفية متحركة بالأهداف والأرقام والرموز
   ================================================== */

/* الخلفية الأساسية المتحركة */
#pg-hex-question-overlay.pg-hex-closest-mode {
    isolation: isolate;

    background:
        radial-gradient(
            circle at 13% 22%,
            rgba(255, 211, 60, 0.18) 0 4px,
            transparent 5px 24px,
            rgba(255, 211, 60, 0.1) 25px 28px,
            transparent 29px
        ),
        radial-gradient(
            circle at 86% 72%,
            rgba(74, 224, 255, 0.16) 0 5px,
            transparent 6px 27px,
            rgba(74, 224, 255, 0.09) 28px 31px,
            transparent 32px
        ),
        radial-gradient(
            circle at 72% 16%,
            rgba(255, 83, 118, 0.14) 0 4px,
            transparent 5px 21px,
            rgba(255, 83, 118, 0.08) 22px 25px,
            transparent 26px
        ),
        radial-gradient(
            circle at 28% 82%,
            rgba(62, 231, 151, 0.13) 0 4px,
            transparent 5px 23px,
            rgba(62, 231, 151, 0.08) 24px 27px,
            transparent 28px
        ),
        linear-gradient(
            145deg,
            #07183e,
            #123d7d 48%,
            #321968
        ) !important;

    background-size:
        330px 330px,
        390px 390px,
        290px 290px,
        360px 360px,
        auto;

    animation:
        pgHexClosestBackgroundDrift
        18s
        linear
        infinite;
}

/* الطبقة الأولى: أهداف وأرقام */
#pg-hex-question-overlay.pg-hex-closest-mode::before {
    content:
        "🎯   25   %   99   ±   50   🎯   75   ×   10   100   🎯";

    position: absolute;
    top: 7%;
    left: -18%;
    z-index: 0;

    width: 145%;
    height: 38%;

    pointer-events: none;

    color: rgba(255, 255, 255, 0.11);

    font-size: clamp(
        28px,
        3.3vw,
        54px
    );
    font-weight: 900;
    letter-spacing: 16px;
    line-height: 2.5;
    white-space: nowrap;

    text-shadow:
        0 0 18px rgba(88, 198, 255, 0.28);

    transform: rotate(-8deg);

    animation:
        pgHexClosestSymbolsMoveOne
        22s
        linear
        infinite;
}

/* الطبقة الثانية: مساطر ورموز حسابية */
#pg-hex-question-overlay.pg-hex-closest-mode::after {
    content:
        "📏   ≈   80   −   40   🎯   +   20   %   60   📏   90   ≈";

    position: absolute;
    right: -22%;
    bottom: 5%;
    z-index: 0;

    width: 150%;
    height: 37%;

    pointer-events: none;

    color: rgba(255, 218, 80, 0.11);

    font-size: clamp(
        27px,
        3vw,
        50px
    );
    font-weight: 900;
    letter-spacing: 17px;
    line-height: 2.6;
    white-space: nowrap;

    text-shadow:
        0 0 20px rgba(255, 200, 55, 0.25);

    transform: rotate(7deg);

    animation:
        pgHexClosestSymbolsMoveTwo
        25s
        linear
        infinite;
}

/* إبقاء محتوى اللعبة فوق الخلفية */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    position: relative !important;
    z-index: 2;

    background:
        linear-gradient(
            145deg,
            rgba(7, 30, 76, 0.82),
            rgba(15, 58, 118, 0.72),
            rgba(43, 24, 104, 0.8)
        ) !important;

    backdrop-filter: blur(2px);
}

/* لمعان هادئ يتحرك داخل بطاقة الصفحة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::after {
    content: "";

    position: absolute;
    top: -40%;
    left: -25%;
    z-index: 0;

    width: 38%;
    height: 180%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(102, 211, 255, 0.07),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pgHexClosestCardShine
        8s
        ease-in-out
        infinite;
}

/* إبقاء جميع العناصر فوق اللمعة */
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 2;
}

/* تحريك دوائر الأهداف الموجودة في الخلفية */
@keyframes pgHexClosestBackgroundDrift {
    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    50% {
        background-position:
            38px 25px,
            -32px 42px,
            30px -28px,
            -25px -35px,
            0 0;
    }

    100% {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }
}

/* حركة طبقة الأهداف والأرقام */
@keyframes pgHexClosestSymbolsMoveOne {
    0% {
        transform:
            translateX(-8%)
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateX(8%)
            translateY(35px)
            rotate(-6deg);
    }

    100% {
        transform:
            translateX(-8%)
            translateY(0)
            rotate(-8deg);
    }
}

/* حركة طبقة المساطر والرموز */
@keyframes pgHexClosestSymbolsMoveTwo {
    0% {
        transform:
            translateX(9%)
            translateY(0)
            rotate(7deg);
    }

    50% {
        transform:
            translateX(-8%)
            translateY(-30px)
            rotate(5deg);
    }

    100% {
        transform:
            translateX(9%)
            translateY(0)
            rotate(7deg);
    }
}

/* حركة اللمعة داخل الصفحة */
@keyframes pgHexClosestCardShine {
    0%,
    18% {
        left: -35%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    62% {
        left: 110%;
        opacity: 0.8;
    }

    63%,
    100% {
        left: 110%;
        opacity: 0;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   توسيط المحتوى عموديًا وإبعاد زر العودة عن المسطرة
   ================================================== */

/* صفحة السؤال قبل ظهور النتيجة:
   تنزيل السؤال قليلًا */
#pg-hex-question-overlay.pg-hex-closest-mode:not(
    :has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
)
#pg-hex-question-text {
    margin-top: 75px !important;
}

/* زيادة المسافة بين السؤال وصندوق التخمينات */
#pg-hex-question-overlay.pg-hex-closest-mode:not(
    :has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
)
#pg-hex-closest-box {
    margin-top: 52px !important;
}

/* صفحة النتيجة:
   تنزيل صندوق المسطرة نحو منتصف الشاشة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    margin:
        112px
        auto
        0 !important;
}

/* تثبيت زر العودة أعلى الصفحة
   حتى لا يكون فوق المسطرة */
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    position: fixed !important;
    top: 100px !important;
    right: 38px !important;
    left: auto !important;
    z-index: 100;

    width: auto !important;
    min-width: 215px;
    margin: 0 !important;
}

/* ضبط الشاشات الأقصر قليلًا */
@media (max-height: 760px) {
    #pg-hex-question-overlay.pg-hex-closest-mode:not(
        :has(
            #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
        )
    )
    #pg-hex-question-text {
        margin-top: 58px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:not(
        :has(
            #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
        )
    )
    #pg-hex-closest-box {
        margin-top: 40px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        margin-top: 92px !important;
    }

    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-submit {
        top: 92px !important;
        right: 30px !important;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة:
   خلفية قوية وواضحة مثل شوف وركز واسمع وركز
   ================================================== */

/* خلفية الشاشة الرئيسية */
html body
#pg-hex-question-overlay.pg-hex-closest-mode {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 211, 65, 0.3) 0 5%,
            transparent 19%
        ),
        radial-gradient(
            circle at 88% 22%,
            rgba(63, 220, 255, 0.25) 0 6%,
            transparent 21%
        ),
        radial-gradient(
            circle at 82% 84%,
            rgba(255, 75, 116, 0.22) 0 7%,
            transparent 24%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(52, 229, 145, 0.2) 0 7%,
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #06153a 0%,
            #0d3c7e 45%,
            #432071 100%
        ) !important;

    animation:
        pgHexClosestStrongScreenMove
        12s
        ease-in-out
        infinite alternate !important;
}

/* بطاقة الشاشة الكاملة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 55px,
            rgba(255, 255, 255, 0.045)
                56px 59px,
            transparent 60px 105px
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.008)
        ) !important;

    box-shadow:
        inset 0 0 120px
            rgba(64, 205, 255, 0.14),
        inset 0 0 45px
            rgba(255, 207, 52, 0.07) !important;

    animation:
        pgHexClosestTargetRingsMove
        13s
        linear
        infinite !important;
}

/* الهدف الكبير المتحرك */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::before {
    content: "🎯" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 8% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;

    box-shadow: none !important;

    font-size:
        clamp(
            90px,
            10vw,
            155px
        ) !important;
    line-height: 1 !important;

    opacity: 0.3 !important;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(0, 0, 0, 0.35)
        )
        drop-shadow(
            0 0 22px
            rgba(255, 204, 54, 0.38)
        ) !important;

    transform-origin: center !important;
    pointer-events: none !important;

    animation:
        pgHexClosestBigTargetFloat
        6.5s
        ease-in-out
        infinite
        alternate !important;
}

/* شريط المساطر والأرقام والرموز */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card::after {
    content:
        "📏  25  %  ≈  50  ±  75  🎯" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 6% !important;
    left: 3% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: rgba(
        255,
        255,
        255,
        0.68
    ) !important;

    background: none !important;
    box-shadow: none !important;

    font-family:
        Arial,
        sans-serif !important;
    font-size:
        clamp(
            42px,
            5.2vw,
            78px
        ) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 10px !important;
    white-space: nowrap !important;

    opacity: 0.21 !important;

    text-shadow:
        0 0 22px
            rgba(73, 210, 255, 0.65),
        0 8px 15px
            rgba(0, 0, 0, 0.3) !important;

    pointer-events: none !important;

    animation:
        pgHexClosestNumbersFloat
        7.5s
        ease-in-out
        infinite
        alternate !important;
}

/* ضمان بقاء عناصر السؤال والمسطرات فوق المؤثرات */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* زر العودة يبقى فوق جميع المؤثرات */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-submit {
    z-index: 100 !important;
}

/* حركة ألوان الشاشة */
@keyframes pgHexClosestStrongScreenMove {
    from {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            45px 28px,
            -38px 35px,
            32px -30px,
            -35px -25px,
            0 0;
    }
}

/* حركة دوائر الهدف داخل الصفحة */
@keyframes pgHexClosestTargetRingsMove {
    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            115px 70px,
            0 0;
    }
}

/* حركة الهدف الكبير */
@keyframes pgHexClosestBigTargetFloat {
    from {
        translate: 0 0;
        rotate: -7deg;
        scale: 0.92;
    }

    to {
        translate: -34px 24px;
        rotate: 8deg;
        scale: 1.08;
    }
}

/* نبضة إضافية للهدف */
@keyframes pgHexClosestTargetPulse {
    0%,
    100% {
        opacity: 0.23;
        filter:
            drop-shadow(
                0 0 15px
                rgba(255, 207, 54, 0.32)
            );
    }

    50% {
        opacity: 0.36;
        filter:
            drop-shadow(
                0 0 34px
                rgba(255, 207, 54, 0.65)
            );
    }
}

/* حركة شريط الأرقام والمساطر */
@keyframes pgHexClosestNumbersFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
    }

    to {
        translate: 38px -27px;
        rotate: -4deg;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   إلغاء أزرار التحكيم وإبعاد المسطرة عن زر العودة
   ================================================== */

/* إخفاء إجابة صحيحة وإجابة خاطئة نهائيًا */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-judgement-buttons {
    display: none !important;
}

/* تثبيت زر العودة في الأعلى */
html body
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-submit {
    position: fixed !important;
    top: 96px !important;
    right: 38px !important;
    left: auto !important;
    z-index: 150 !important;

    margin: 0 !important;
}

/* تنزيل صندوق المسطرة بعيدًا عن زر العودة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-box {
    margin:
        170px
        auto
        0 !important;
}

/* ضبط الشاشات القصيرة */
@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-submit {
        top: 84px !important;
        right: 28px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-closest-mode:has(
        #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
    )
    #pg-hex-closest-box {
        margin-top: 150px !important;
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   جملة الفريق الأقرب أسفل المسطرة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-closest-mode:has(
    #pg-hex-closest-ruler-result:not(.pg-hex-hidden)
)
#pg-hex-closest-result:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: min(620px, 88%);
    min-height: 58px;
    margin:
        20px
        auto
        5px !important;
    padding: 11px 22px;

    border: 2px solid #ffdf67;
    border-radius: 17px;

    color: #fff8c8;

    background:
        linear-gradient(
            145deg,
            rgba(137, 87, 0, 0.96),
            rgba(74, 45, 0, 0.97)
        );

    box-shadow:
        0 7px 0 #493000,
        0 13px 23px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(255, 211, 65, 0.27);

    font-size:
        clamp(
            18px,
            1.8vw,
            25px
        );
    font-weight: 900;
    line-height: 1.4;
    text-align: center;

    animation:
        pgHexClosestWinnerSentence
        0.65s
        cubic-bezier(0.2, 1.3, 0.4, 1)
        both;
}

@keyframes pgHexClosestWinnerSentence {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==================================================
   الأقرب يكسب في الشبكة فقط:
   توحيد لون الإجابة الصحيحة والفريق الأقرب
   ================================================== */

/* جملة الفريق الأقرب */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
#pg-hex-closest-result:not(.pg-hex-hidden) {
    border-color: #79e8ff !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #127fc4,
            #174da8,
            #38278c
        ) !important;

    box-shadow:
        0 7px 0 #092b70,
        0 13px 24px rgba(0, 0, 0, 0.34),
        0 0 27px rgba(82, 213, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* لون دائرة الإجابة الصحيحة على المسطرة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker {
    --marker-color: #52dcff !important;
}

/* دائرة الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker i {
    border-color: #d9f9ff !important;

    background:
        radial-gradient(
            circle,
            #ffffff 0 22%,
            #5ce1ff 24% 54%,
            #176bd2 56% 100%
        ) !important;

    box-shadow:
        0 0 0 7px rgba(82, 220, 255, 0.17),
        0 0 34px rgba(82, 220, 255, 0.95) !important;
}

/* رقم الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker
.pg-hex-closest-marker-value {
    border-color: #7aeaff !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #168fd0,
            #174eaa,
            #312685
        ) !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(73, 215, 255, 0.55) !important;
}

/* السهم أسفل رقم الإجابة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker
.pg-hex-closest-marker-value::after {
    border-top-color: #55dcff !important;
}

/* عبارة الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-closest-mode
.pg-hex-closest-answer-marker small {
    border-color: #72e7ff !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(18, 126, 195, 0.98),
            rgba(39, 40, 137, 0.98)
        ) !important;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(82, 218, 255, 0.35);
}
/* ==================================================
   بدون كلام داخل الشبكة فقط:
   شاشة كاملة وإخفاء العناصر غير المطلوبة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-charades-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 24000 !important;

    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 12px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            145deg,
            #071536,
            #143e7c 48%,
            #44206e
        ) !important;
}

/* بطاقة الفئة تملأ الشاشة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-card {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 22px 34px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    border: 2px solid rgba(88, 208, 255, 0.85) !important;
    border-radius: 25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(8, 34, 82, 0.9),
            rgba(18, 66, 126, 0.82),
            rgba(54, 27, 105, 0.87)
        ) !important;

    box-shadow:
        inset 0 0 100px rgba(73, 203, 255, 0.11),
        0 0 30px rgba(39, 178, 255, 0.24) !important;
}

/* إخفاء وسائل المساعدة أثناء فتح بدون كلام */
#pg-hex-game-screen:has(
    #pg-hex-question-overlay.pg-hex-charades-mode:not(
        .pg-hex-hidden
    )
)
.pg-hex-side-helps {
    display: none !important;
}

/* إخفاء رقم الخلية */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* تحرير الهيدر من التوزيع القديم */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-header {
    position: static !important;
}

/* المؤقت أعلى اليسار */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 25px !important;
    left: 30px !important;
    right: auto !important;
    z-index: 50 !important;

    margin: 0 !important;
}

/* اسم الفريق أسفل المؤقت */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-team-name {
    position: absolute !important;
    top: 111px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 50 !important;

    min-width: 135px;
    padding: 9px 16px;

    border: 2px solid #7ee8ff;
    border-radius: 17px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #178dcc,
            #1750a7,
            #392789
        );

    box-shadow:
        0 6px 0 #092b70,
        0 11px 20px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(84, 215, 255, 0.25);

    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

/* ضبط الشاشة القصيرة */
@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-charades-mode {
        padding: 7px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    .pg-hex-question-card {
        padding:
            15px
            25px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-question-timer {
        top: 17px !important;
        left: 22px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-question-team-name {
        top: 101px !important;
        left: 13px !important;
    }
}
/* ==================================================
   بدون كلام داخل الشبكة فقط:
   تصميم التعليمات وصندوق QR
   ================================================== */

/* بطاقة التعليمات الرئيسية */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-text {
    width: min(760px, 68vw);
    margin:
        65px
        auto
        34px !important;
    padding:
        18px
        30px;

    border: 2px solid rgba(120, 231, 255, 0.8);
    border-radius: 24px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 112, 172, 0.96),
            rgba(30, 68, 154, 0.96),
            rgba(84, 39, 139, 0.96)
        );

    box-shadow:
        0 9px 0 rgba(7, 38, 100, 0.9),
        0 16px 29px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(76, 211, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    font-size:
        clamp(
            24px,
            2.4vw,
            38px
        ) !important;
    font-weight: 900;
    line-height: 1.45 !important;
    text-align: center;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4);

    animation:
        pgHexCharadesQuestionEntrance
        0.65s
        cubic-bezier(0.2, 0.9, 0.3, 1.18)
        both;
}

/* صندوق بدون كلام */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box {
    position: relative;
    z-index: 10;

    width: min(590px, 58vw);
    margin:
        35px
        auto
        0 !important;
    padding:
        72px
        30px
        27px;

    border: 3px solid #ffd868;
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 39, 88, 0.97),
            rgba(20, 66, 128, 0.96),
            rgba(60, 31, 110, 0.97)
        );

    box-shadow:
        0 11px 0 #071f59,
        0 20px 35px rgba(0, 0, 0, 0.38),
        0 0 29px rgba(255, 207, 75, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    text-align: center;

    animation:
        pgHexCharadesBoxEntrance
        0.7s
        0.15s
        cubic-bezier(0.2, 0.9, 0.3, 1.18)
        both;
}

/* عنوان بدون كلام أعلى الصندوق */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box::before {
    content: "🎬 بدون كلام 🤫";

    position: absolute;
    top: -26px;
    left: 50%;

    min-width: 285px;
    padding:
        12px
        24px;

    border: 3px solid #fff0ac;
    border-radius: 999px;

    color: #172854;

    background:
        linear-gradient(
            180deg,
            #fff183,
            #ffc63d
        );

    box-shadow:
        0 7px 0 #ce7d00,
        0 13px 23px rgba(0, 0, 0, 0.34),
        inset 0 2px 2px rgba(255, 255, 255, 0.75);

    font-size:
        clamp(
            20px,
            2vw,
            28px
        );
    font-weight: 900;
    white-space: nowrap;

    transform: translateX(-50%);
}

/* جملة مسح الرمز */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box > p {
    margin:
        0
        auto
        20px;

    color: #ffffff;

    font-size:
        clamp(
            17px,
            1.55vw,
            22px
        );
    font-weight: 900;
    line-height: 1.5;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.4);
}

/* بطاقة رمز QR */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-qr {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 172px;
    height: 172px;
    margin:
        0
        auto;

    border: 6px solid #ffffff;
    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 8px 0 #1697c8,
        0 15px 27px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(76, 218, 255, 0.42);

    animation:
        pgHexCharadesQrFloat
        3.5s
        ease-in-out
        infinite
        alternate;
}

/* توحيد حجم QR */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-qr img,
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-qr canvas {
    width: 150px !important;
    height: 150px !important;

    border-radius: 12px;
}

/* نبضة حول رمز QR */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-qr::after {
    content: "";

    position: absolute;
    inset: -13px;

    border: 3px solid rgba(89, 222, 255, 0.55);
    border-radius: 29px;

    pointer-events: none;

    animation:
        pgHexCharadesQrPulse
        2s
        ease-out
        infinite;
}

/* حركات الدخول */
@keyframes pgHexCharadesQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCharadesBoxEntrance {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCharadesQrFloat {
    from {
        translate: 0 0;
        rotate: -1deg;
    }

    to {
        translate: 0 -8px;
        rotate: 1deg;
    }
}

@keyframes pgHexCharadesQrPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.94);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

/* ضبط الشاشات القصيرة */
@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-question-text {
        margin-top: 45px !important;
        margin-bottom: 22px !important;
        padding:
            12px
            24px;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-charades-box {
        margin-top: 27px !important;
        padding:
            57px
            24px
            19px;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-charades-qr {
        width: 145px;
        height: 145px;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-charades-qr img,
    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-charades-qr canvas {
        width: 126px !important;
        height: 126px !important;
    }
}
/* ==================================================
   بدون كلام داخل الشبكة فقط:
   زر ابدأ ومراحل العرض والخلفية المتحركة
   ================================================== */

/* زر ابدأ التمثيل */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-start-button {
    position: relative;

    display: block;
    min-width: 245px;
    margin:
        27px
        auto
        2px;
    padding:
        14px
        28px;

    overflow: hidden;

    border: 3px solid #fff3ae;
    border-radius: 19px;

    color: #172854;

    background:
        linear-gradient(
            180deg,
            #fff27e,
            #ffc438
        );

    box-shadow:
        0 8px 0 #cb7900,
        0 14px 24px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(255, 205, 58, 0.3),
        inset 0 2px 2px rgba(255, 255, 255, 0.75);

    font-family: inherit;
    font-size: 19px;
    font-weight: 900;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;

    animation:
        pgHexCharadesStartEntrance
        0.6s
        0.35s
        cubic-bezier(0.2, 1.3, 0.4, 1)
        both;
}

/* لمعة تمر فوق زر ابدأ */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-start-button::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -35%;

    width: 24%;
    height: 260%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.78),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pgHexCharadesStartShine
        3.7s
        ease-in-out
        infinite;
}

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-start-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);

    box-shadow:
        0 10px 0 #cb7900,
        0 17px 27px rgba(0, 0, 0, 0.4),
        0 0 29px rgba(255, 205, 58, 0.48);
}

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-start-button:active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #cb7900,
        0 7px 13px rgba(0, 0, 0, 0.32);
}

/* بعد الضغط على ابدأ نخفي صندوق QR كاملًا */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box.is-started {
    display: none !important;
}

/* تنزيل محتوى مرحلة اللعب نحو المنتصف */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-charades-box.is-started
)
#pg-hex-question-text {
    width: min(790px, 68vw);
    margin:
        155px
        auto
        50px !important;
}

/* ==================================================
   خلفية بدون كلام:
   وجه صامت ورموز تمثيل وسينما متحركة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-charades-mode {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 210, 70, 0.28) 0 6%,
            transparent 21%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(71, 220, 255, 0.24) 0 7%,
            transparent 23%
        ),
        radial-gradient(
            circle at 83% 84%,
            rgba(206, 90, 255, 0.23) 0 8%,
            transparent 25%
        ),
        radial-gradient(
            circle at 17% 82%,
            rgba(61, 231, 155, 0.19) 0 7%,
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #061438 0%,
            #103d7d 46%,
            #492173 100%
        ) !important;

    animation:
        pgHexCharadesScreenColors
        12s
        ease-in-out
        infinite
        alternate !important;
}

/* دوائر سينمائية داخل الصفحة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-card {
    isolation: isolate !important;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 55px,
            rgba(255, 255, 255, 0.04)
                56px 59px,
            transparent 60px 108px
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.008)
        ) !important;

    animation:
        pgHexCharadesBackgroundRings
        14s
        linear
        infinite !important;
}

/* رمز الصمت الكبير */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-card::before {
    content: "🤫" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 8% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            90px,
            10vw,
            150px
        ) !important;
    line-height: 1 !important;

    opacity: 0.3 !important;

    filter:
        drop-shadow(
            0 12px 20px rgba(0, 0, 0, 0.35)
        )
        drop-shadow(
            0 0 22px rgba(255, 209, 65, 0.34)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexCharadesSilentFloat
        6.5s
        ease-in-out
        infinite
        alternate !important;
}

/* رموز التمثيل والسينما */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-card::after {
    content:
        "🎭   🎬   🎥   🤐   🎞️" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            48px,
            5.8vw,
            84px
        ) !important;
    line-height: 1 !important;
    letter-spacing: 10px !important;
    white-space: nowrap !important;

    opacity: 0.19 !important;

    filter:
        drop-shadow(
            0 10px 18px rgba(0, 0, 0, 0.3)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexCharadesCinemaFloat
        7.5s
        ease-in-out
        infinite
        alternate !important;
}

/* إبقاء محتوى اللعبة فوق المؤثرات */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* الحركات */
@keyframes pgHexCharadesStartEntrance {
    from {
        opacity: 0;
        transform:
            translateY(24px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCharadesStartShine {
    0%,
    25% {
        left: -35%;
        opacity: 0;
    }

    42% {
        opacity: 1;
    }

    68% {
        left: 120%;
        opacity: 0.8;
    }

    69%,
    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes pgHexCharadesScreenColors {
    from {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            42px 28px,
            -38px 34px,
            32px -28px,
            -34px -25px,
            0 0;
    }
}

@keyframes pgHexCharadesBackgroundRings {
    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            115px 75px,
            0 0;
    }
}

@keyframes pgHexCharadesSilentFloat {
    from {
        translate: 0 0;
        rotate: -7deg;
        scale: 0.92;
    }

    to {
        translate: -35px 24px;
        rotate: 7deg;
        scale: 1.08;
    }
}

@keyframes pgHexCharadesCinemaFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
    }

    to {
        translate: 36px -25px;
        rotate: -4deg;
    }
}

/* ضبط الشاشات القصيرة */
@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-charades-mode:has(
        #pg-hex-charades-box.is-started
    )
    #pg-hex-question-text {
        margin-top: 125px !important;
        margin-bottom: 38px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-charades-mode
    #pg-hex-charades-start-button {
        margin-top: 20px;
        padding:
            11px
            25px;
    }
}
/* ==================================================
   بدون كلام في الشبكة فقط:
   فرض إخفاء عناصر اللعب قبل الضغط على ابدأ
   ================================================== */

/* احترام كلاس الإخفاء دائمًا */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-timer.pg-hex-hidden,

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-team-name.pg-hex-hidden,

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer.pg-hex-hidden {
    display: none !important;
}

/* قبل الضغط على ابدأ:
   إخفاء المؤقت واسم الفريق وزر الإجابة بالقوة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:not(
    :has(#pg-hex-charades-box.is-started)
)
#pg-hex-question-timer,

html body
#pg-hex-question-overlay.pg-hex-charades-mode:not(
    :has(#pg-hex-charades-box.is-started)
)
#pg-hex-question-team-name,

html body
#pg-hex-question-overlay.pg-hex-charades-mode:not(
    :has(#pg-hex-charades-box.is-started)
)
#pg-hex-show-answer {
    display: none !important;
}

/* بعد الضغط على ابدأ:
   إظهار المؤقت */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-charades-box.is-started
)
#pg-hex-question-timer:not(.pg-hex-hidden) {
    display: flex !important;
}

/* بعد الضغط على ابدأ:
   إظهار اسم الفريق */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-charades-box.is-started
)
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    display: block !important;
}

/* بعد الضغط على ابدأ:
   إظهار زر الإجابة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-charades-box.is-started
)
#pg-hex-show-answer:not(.pg-hex-hidden) {
    display: inline-flex !important;
}
/* بدون كلام في الشبكة فقط:
   حذف اسم الفئة من أعلى صندوق QR */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box::before {
    display: none !important;
    content: none !important;
}

/* إزالة المساحة التي كانت مخصصة لاسم الفئة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-box {
    padding-top: 28px !important;
}
/* بدون كلام في الشبكة فقط:
   توسيط رقم المؤقت داخل الدائرة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-timer:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    direction: ltr !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
}
/* ==================================================
   بدون كلام في الشبكة فقط:
   تصميم مميز لزر إظهار الإجابة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 40 !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 245px;
    min-height: 58px;
    margin:
        0
        auto !important;
    padding:
        12px
        28px !important;

    overflow: hidden;

    border: 3px solid #ffd7f4 !important;
    border-radius: 18px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #ff4d91,
            #c52fc8,
            #7137c7
        ) !important;

    box-shadow:
        0 8px 0 #5d1d8d,
        0 14px 24px rgba(0, 0, 0, 0.36),
        0 0 26px rgba(255, 75, 176, 0.48),
        inset 0 2px 2px rgba(255, 255, 255, 0.35) !important;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 900 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

/* لمعة تمر فوق الزر */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer:not(.pg-hex-hidden)::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -35%;

    width: 24%;
    height: 260%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pgHexCharadesAnswerShine
        3.5s
        ease-in-out
        infinite;
}

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    transform: translateY(-3px);
    filter: brightness(1.1);

    box-shadow:
        0 10px 0 #5d1d8d,
        0 17px 28px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(255, 76, 183, 0.68) !important;
}

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #5d1d8d,
        0 7px 13px rgba(0, 0, 0, 0.32) !important;
}

@keyframes pgHexCharadesAnswerShine {
    0%,
    25% {
        left: -35%;
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    68% {
        left: 120%;
        opacity: 0.8;
    }

    69%,
    100% {
        left: 120%;
        opacity: 0;
    }
}
/* ==================================================
   فئة الشيفرة داخل الشبكة فقط:
   التصميم الكامل
   ================================================== */

/* الشاشة الكاملة والخلفية الأساسية */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 24000 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 10px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 211, 67, 0.27) 0 6%,
            transparent 21%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(69, 221, 255, 0.24) 0 7%,
            transparent 23%
        ),
        radial-gradient(
            circle at 82% 84%,
            rgba(183, 79, 255, 0.24) 0 8%,
            transparent 25%
        ),
        radial-gradient(
            circle at 17% 82%,
            rgba(58, 231, 155, 0.19) 0 7%,
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #061438 0%,
            #103c78 45%,
            #44206f 100%
        ) !important;

    animation:
        pgHexCipherScreenColors
        12s
        ease-in-out
        infinite
        alternate !important;
}

/* بطاقة الصفحة الكاملة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding:
        20px
        34px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    border: 2px solid rgba(91, 213, 255, 0.88) !important;
    border-radius: 25px !important;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 54px,
            rgba(255, 255, 255, 0.035)
                55px 58px,
            transparent 59px 108px
        ),
        linear-gradient(
            145deg,
            rgba(8, 35, 84, 0.88),
            rgba(18, 66, 127, 0.8),
            rgba(56, 27, 108, 0.86)
        ) !important;

    box-shadow:
        inset 0 0 110px rgba(70, 207, 255, 0.12),
        0 0 30px rgba(43, 182, 255, 0.25) !important;

    animation:
        pgHexCipherLinesMove
        14s
        linear
        infinite !important;
}

/* إبقاء المحتوى فوق الخلفية */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* إخفاء وسائل المساعدة */
#pg-hex-game-screen:has(
    #pg-hex-question-overlay.pg-hex-cipher-mode:not(
        .pg-hex-hidden
    )
)
.pg-hex-side-helps {
    display: none !important;
}

/* إخفاء رقم الخلية */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* تحرير الهيدر القديم */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
.pg-hex-question-header {
    position: static !important;
}

/* المؤقت أعلى اليسار */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 24px !important;
    left: 29px !important;
    right: auto !important;
    z-index: 80 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* اسم الفريق أسفل المؤقت */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-question-team-name {
    position: absolute !important;
    top: 110px !important;
    left: 19px !important;
    right: auto !important;
    z-index: 80 !important;

    min-width: 140px;
    padding:
        9px
        16px;

    border: 2px solid #78e7ff;
    border-radius: 17px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #168dcd,
            #174fa7,
            #3a278a
        );

    box-shadow:
        0 6px 0 #092b70,
        0 11px 20px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(79, 216, 255, 0.27);

    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

/* بطاقة السؤال */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-question-text {
    width: min(780px, 68vw);
    margin:
        42px
        auto
        20px !important;
    padding:
        17px
        30px;

    border: 2px solid rgba(124, 232, 255, 0.82);
    border-radius: 23px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 116, 174, 0.96),
            rgba(30, 69, 155, 0.96),
            rgba(83, 39, 139, 0.96)
        );

    box-shadow:
        0 9px 0 rgba(7, 38, 99, 0.9),
        0 16px 28px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(76, 211, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    font-size:
        clamp(
            23px,
            2.25vw,
            36px
        ) !important;
    font-weight: 900;
    line-height: 1.4 !important;
    text-align: center;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4);

    animation:
        pgHexCipherQuestionEntrance
        0.65s
        cubic-bezier(0.2, 0.9, 0.3, 1.18)
        both;
}

/* بطاقة صورة الشيفرة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-question-image:not(.pg-hex-hidden) {
    display: block !important;

    width: min(540px, 50vw) !important;
    height: min(310px, 40vh) !important;

    margin:
        27px
        auto
        22px !important;
    padding: 13px !important;

    object-fit: contain !important;

    border: 4px solid #ffd965 !important;
    border-radius: 26px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf7ff
        ) !important;

    box-shadow:
        0 11px 0 #1a4c91,
        0 20px 35px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(255, 213, 73, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;

    animation:
        pgHexCipherImageEntrance
        0.72s
        0.12s
        cubic-bezier(0.2, 0.95, 0.3, 1.15)
        both;
}

/* زر إظهار الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 50 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 245px;
    min-height: 57px;

    margin:
        8px
        auto
        0 !important;
    padding:
        12px
        28px !important;

    overflow: hidden;

    border: 3px solid #ffe0f7 !important;
    border-radius: 18px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #ff4d91,
            #c42fc8,
            #7137c7
        ) !important;

    box-shadow:
        0 8px 0 #5c1c8d,
        0 14px 24px rgba(0, 0, 0, 0.36),
        0 0 27px rgba(255, 75, 176, 0.48),
        inset 0 2px 2px rgba(255, 255, 255, 0.35) !important;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 900 !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;

    animation:
        pgHexCipherButtonEntrance
        0.58s
        0.28s
        cubic-bezier(0.2, 1.3, 0.4, 1)
        both;
}

/* لمعة زر الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-show-answer:not(.pg-hex-hidden)::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -35%;

    width: 24%;
    height: 260%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pgHexCipherButtonShine
        3.5s
        ease-in-out
        infinite;
}

html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    transform: translateY(-3px);
    filter: brightness(1.1);

    box-shadow:
        0 10px 0 #5c1c8d,
        0 17px 28px rgba(0, 0, 0, 0.4),
        0 0 36px rgba(255, 76, 183, 0.68) !important;
}

html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #5c1c8d,
        0 7px 13px rgba(0, 0, 0, 0.32) !important;
}

/* ==================================================
   صفحة الإجابة
   ================================================== */

/* إخفاء السؤال والصورة والمؤقت واسم الفريق */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text,

html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-image,

html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer,

html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}

/* بطاقة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 30 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: min(760px, 70vw);
    min-height: 245px;

    margin:
        155px
        auto
        30px !important;
    padding:
        62px
        35px
        30px !important;

    border: 3px solid #75e8ff !important;
    border-radius: 29px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 133, 186, 0.98),
            rgba(25, 73, 160, 0.98),
            rgba(79, 42, 142, 0.98)
        ) !important;

    box-shadow:
        0 11px 0 #092d70,
        0 21px 38px rgba(0, 0, 0, 0.4),
        0 0 34px rgba(75, 218, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;

    text-align: center;

    animation:
        pgHexCipherAnswerEntrance
        0.7s
        cubic-bezier(0.2, 1.15, 0.3, 1)
        both;
}

/* أيقونة فتح القفل */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden)::before {
    content: "🔓" !important;

    position: absolute;
    top: -58px;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    border: 4px solid #fff0a5;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffd85a,
            #ff9e2d
        );

    box-shadow:
        0 8px 0 #b76500,
        0 14px 25px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(255, 205, 60, 0.48);

    font-size: 54px;

    transform: translateX(-50%);

    animation:
        pgHexCipherLockOpen
        0.72s
        cubic-bezier(0.2, 1.5, 0.4, 1)
        both;
}

/* عنوان الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden)
> span {
    display: block;

    margin-bottom: 13px;

    color: #c9f6ff;

    font-size:
        clamp(
            18px,
            1.7vw,
            24px
        );
    font-weight: 900;
}

/* نص الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-text {
    color: #ffffff !important;

    font-size:
        clamp(
            32px,
            4vw,
            55px
        ) !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;

    text-shadow:
        0 4px 7px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(109, 231, 255, 0.3);
}

/* أزرار التحكيم */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 40 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: min(680px, 66vw);
    gap: 20px;

    margin:
        28px
        auto
        0 !important;
}

/* الشكل المشترك للزرين */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-judgement-buttons button {
    min-height: 61px;
    padding:
        12px
        24px !important;

    border: 3px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 18px !important;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 900 !important;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

/* زر الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-correct-button {
    background:
        linear-gradient(
            145deg,
            #24ca7d,
            #078c59
        ) !important;

    box-shadow:
        0 8px 0 #046442,
        0 14px 24px rgba(0, 0, 0, 0.33),
        0 0 22px rgba(41, 224, 139, 0.3) !important;
}

/* زر الإجابة الخاطئة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-wrong-button {
    background:
        linear-gradient(
            145deg,
            #ff5572,
            #bd2145
        ) !important;

    box-shadow:
        0 8px 0 #821631,
        0 14px 24px rgba(0, 0, 0, 0.33),
        0 0 22px rgba(255, 73, 108, 0.3) !important;
}

html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-judgement-buttons button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-judgement-buttons button:active {
    transform: translateY(5px);
    box-shadow: none !important;
}

/* ==================================================
   مؤثرات الخلفية
   ================================================== */

/* قفل كبير متحرك */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
.pg-hex-question-card::before {
    content: "🔐" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 8% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            90px,
            10vw,
            150px
        ) !important;
    line-height: 1 !important;

    opacity: 0.3 !important;

    filter:
        drop-shadow(
            0 12px 20px rgba(0, 0, 0, 0.35)
        )
        drop-shadow(
            0 0 23px rgba(255, 210, 61, 0.36)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexCipherLockFloat
        6.5s
        ease-in-out
        infinite
        alternate !important;
}

/* شريط رموز الشيفرة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
.pg-hex-question-card::after {
    content:
        "🔎   #   0   1   ?   🔑   %   &   🧩" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: rgba(255, 255, 255, 0.68) !important;
    background: none !important;
    box-shadow: none !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(
            44px,
            5.4vw,
            80px
        ) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 11px !important;
    white-space: nowrap !important;

    opacity: 0.2 !important;

    text-shadow:
        0 0 22px rgba(76, 213, 255, 0.62),
        0 9px 17px rgba(0, 0, 0, 0.32) !important;

    pointer-events: none !important;

    animation:
        pgHexCipherSymbolsFloat
        7.5s
        ease-in-out
        infinite
        alternate !important;
}

/* الحركات */
@keyframes pgHexCipherScreenColors {
    from {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            43px 28px,
            -38px 34px,
            32px -29px,
            -34px -25px,
            0 0;
    }
}

@keyframes pgHexCipherLinesMove {
    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            110px 75px,
            0 0;
    }
}

@keyframes pgHexCipherLockFloat {
    from {
        translate: 0 0;
        rotate: -7deg;
        scale: 0.92;
    }

    to {
        translate: -35px 24px;
        rotate: 7deg;
        scale: 1.08;
    }
}

@keyframes pgHexCipherSymbolsFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
    }

    to {
        translate: 37px -25px;
        rotate: -4deg;
    }
}

@keyframes pgHexCipherQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-24px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCipherImageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(28px)
            scale(0.88)
            rotate(-2deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}

@keyframes pgHexCipherButtonEntrance {
    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCipherButtonShine {
    0%,
    25% {
        left: -35%;
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    68% {
        left: 120%;
        opacity: 0.8;
    }

    69%,
    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes pgHexCipherAnswerEntrance {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.88);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexCipherLockOpen {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(0.3)
            rotate(-15deg);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1)
            rotate(0);
    }
}

/* ==================================================
   ضبط الشاشات القصيرة
   ================================================== */

@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode {
        padding: 6px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    .pg-hex-question-card {
        padding:
            12px
            25px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-timer {
        top: 16px !important;
        left: 21px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-team-name {
        top: 100px !important;
        left: 12px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-text {
        margin:
            25px
            auto
            12px !important;
        padding:
            11px
            24px;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: min(470px, 46vw) !important;
        height: min(245px, 34vh) !important;

        margin:
            18px
            auto
            13px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-show-answer:not(.pg-hex-hidden) {
        min-height: 50px;
        margin-top: 5px !important;
        padding:
            9px
            24px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        min-height: 205px;

        margin:
            125px
            auto
            20px !important;
        padding:
            52px
            30px
            23px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        margin-top: 20px !important;
    }
}

/* ضبط الشاشات الضيقة */
@media (max-width: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-text,
    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        width: 92vw;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: 86vw !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        grid-template-columns: 1fr;

        width: 88vw;
    }
}
/* ==================================================
   الشيفرة في الشبكة فقط:
   استغلال مساحة الصفحة وتكبير الصورة
   ================================================== */

/* الصفحة الأولى:
   تنزيل بطاقة السؤال قليلًا */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-text {
    margin:
        68px
        auto
        0 !important;
}

/* الصفحة الأولى:
   تكبير الصورة وتنزيلها */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-image:not(.pg-hex-hidden) {
    width: min(650px, 58vw) !important;
    height: min(350px, 43vh) !important;

    margin:
        48px
        auto
        0 !important;
    padding: 15px !important;

    object-fit: contain !important;
}

/* الصفحة الأولى:
   تنزيل زر إظهار الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-show-answer:not(.pg-hex-hidden) {
    margin:
        38px
        auto
        0 !important;
}

/* ==================================================
   صفحة الإجابة:
   إبقاء صورة الشيفرة والجواب تحتها
   ================================================== */

/* إبقاء صورة الشيفرة ظاهرة بعد إظهار الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-image:not(.pg-hex-hidden) {
    display: block !important;

    width: min(620px, 57vw) !important;
    height: min(315px, 39vh) !important;

    margin:
        72px
        auto
        0 !important;
    padding: 14px !important;

    object-fit: contain !important;

    border: 4px solid #ffd965 !important;
    border-radius: 25px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf7ff
        ) !important;

    box-shadow:
        0 10px 0 #194b90,
        0 18px 32px rgba(0, 0, 0, 0.38),
        0 0 29px rgba(255, 213, 73, 0.3) !important;

    animation:
        pgHexCipherAnswerImageEntrance
        0.65s
        ease
        both;
}

/* وضع بطاقة الجواب أسفل الصورة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(720px, 65vw);
    min-height: 145px;

    margin:
        66px
        auto
        18px !important;
    padding:
        43px
        30px
        20px !important;
}

/* تصغير دائرة القفل قليلًا حتى لا تغطي الصورة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden)::before {
    top: -47px;

    width: 88px;
    height: 88px;

    font-size: 42px;
}

/* تقريب أزرار التحكيم من بطاقة الجواب */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    margin:
        20px
        auto
        0 !important;
}

/* حركة ظهور الصورة في صفحة الإجابة */
@keyframes pgHexCipherAnswerImageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-20px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ضبط الشاشات القصيرة فقط */
@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode:not(
        :has(#pg-hex-answer-area:not(.pg-hex-hidden))
    )
    #pg-hex-question-text {
        margin-top: 48px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode:not(
        :has(#pg-hex-answer-area:not(.pg-hex-hidden))
    )
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: min(590px, 55vw) !important;
        height: min(305px, 40vh) !important;

        margin-top: 35px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode:not(
        :has(#pg-hex-answer-area:not(.pg-hex-hidden))
    )
    #pg-hex-show-answer:not(.pg-hex-hidden) {
        margin-top: 27px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode:has(
        #pg-hex-answer-area:not(.pg-hex-hidden)
    )
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: min(560px, 54vw) !important;
        height: min(270px, 36vh) !important;

        margin-top: 55px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-cipher-mode:has(
        #pg-hex-answer-area:not(.pg-hex-hidden)
    )
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        min-height: 125px;

        margin-top: 55px !important;
        padding:
            38px
            27px
            16px !important;
    }
}
/* الشيفرة في الشبكة فقط:
   حذف رمز القفل من صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden)::before {
    display: none !important;
    content: none !important;
}

/* استعادة المساحة بعد حذف القفل */
html body
#pg-hex-question-overlay.pg-hex-cipher-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    margin-top: 28px !important;
    padding-top: 24px !important;
}
/* ==================================================
   أعلام الدول داخل الشبكة فقط:
   التصميم الكامل
   ================================================== */

/* الشاشة الكاملة والخلفية */
html body
#pg-hex-question-overlay.pg-hex-flags-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 24000 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 9px !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255, 214, 67, 0.27) 0 6%,
            transparent 21%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(75, 221, 255, 0.25) 0 7%,
            transparent 23%
        ),
        radial-gradient(
            circle at 82% 84%,
            rgba(70, 230, 151, 0.2) 0 8%,
            transparent 25%
        ),
        radial-gradient(
            circle at 17% 82%,
            rgba(192, 83, 255, 0.21) 0 7%,
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #06163a 0%,
            #104985 47%,
            #31246f 100%
        ) !important;

    animation:
        pgHexFlagsScreenColors
        12s
        ease-in-out
        infinite
        alternate !important;
}

/* بطاقة الشاشة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding:
        18px
        32px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    border: 2px solid rgba(96, 220, 255, 0.88) !important;
    border-radius: 25px !important;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0 58px,
            rgba(255, 255, 255, 0.04)
                59px 62px,
            transparent 63px 112px
        ),
        linear-gradient(
            145deg,
            rgba(7, 40, 84, 0.88),
            rgba(16, 78, 132, 0.8),
            rgba(44, 36, 111, 0.86)
        ) !important;

    box-shadow:
        inset 0 0 115px rgba(69, 215, 255, 0.12),
        0 0 30px rgba(41, 185, 255, 0.25) !important;

    animation:
        pgHexFlagsMapRings
        15s
        linear
        infinite !important;
}

/* إبقاء المحتوى فوق الخلفية */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* إخفاء وسائل المساعدة */
#pg-hex-game-screen:has(
    #pg-hex-question-overlay.pg-hex-flags-mode:not(
        .pg-hex-hidden
    )
)
.pg-hex-side-helps {
    display: none !important;
}

/* إخفاء رقم الخلية */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* تحرير الهيدر القديم */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-header {
    position: static !important;
}

/* المؤقت أعلى اليسار */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-question-timer {
    position: absolute !important;
    top: 23px !important;
    left: 29px !important;
    right: auto !important;
    z-index: 80 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* اسم الفريق أسفل المؤقت */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-question-team-name {
    position: absolute !important;
    top: 109px !important;
    left: 19px !important;
    right: auto !important;
    z-index: 80 !important;

    min-width: 140px;
    padding:
        9px
        16px;

    border: 2px solid #78e8ff;
    border-radius: 17px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #158fcc,
            #1853a7,
            #342b8a
        );

    box-shadow:
        0 6px 0 #092c70,
        0 11px 20px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(79, 217, 255, 0.27);

    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

/* بطاقة سؤال: علم أي دولة؟ */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-question-text {
    width: min(720px, 65vw);
    margin:
        66px
        auto
        0 !important;
    padding:
        16px
        28px;

    border: 2px solid rgba(126, 235, 255, 0.84);
    border-radius: 23px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(16, 132, 177, 0.97),
            rgba(24, 81, 161, 0.97),
            rgba(63, 51, 144, 0.97)
        );

    box-shadow:
        0 9px 0 rgba(6, 43, 98, 0.92),
        0 16px 29px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(76, 216, 255, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);

    font-size:
        clamp(
            25px,
            2.45vw,
            39px
        ) !important;
    font-weight: 900;
    line-height: 1.35 !important;
    text-align: center;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4);

    animation:
        pgHexFlagsQuestionEntrance
        0.65s
        cubic-bezier(0.2, 0.9, 0.3, 1.18)
        both;
}

/* صورة العلم في صفحة السؤال */
html body
#pg-hex-question-overlay.pg-hex-flags-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-image:not(.pg-hex-hidden) {
    display: block !important;

    width: min(680px, 61vw) !important;
    height: min(355px, 44vh) !important;

    margin:
        48px
        auto
        0 !important;
    padding: 15px !important;

    object-fit: contain !important;

    border: 5px solid #ffffff !important;
    border-radius: 27px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edfaff
        ) !important;

    box-shadow:
        0 11px 0 #176aa0,
        0 21px 37px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(82, 221, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

    animation:
        pgHexFlagsImageEntrance
        0.72s
        0.12s
        cubic-bezier(0.2, 0.95, 0.3, 1.15)
        both;
}

/* زر إظهار الإجابة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 50 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 245px;
    min-height: 57px;

    margin:
        36px
        auto
        0 !important;
    padding:
        12px
        28px !important;

    overflow: hidden;

    border: 3px solid #fff0b5 !important;
    border-radius: 18px !important;

    color: #173056 !important;

    background:
        linear-gradient(
            145deg,
            #fff074,
            #ffbd32,
            #ff8d30
        ) !important;

    box-shadow:
        0 8px 0 #bf6500,
        0 14px 24px rgba(0, 0, 0, 0.36),
        0 0 28px rgba(255, 190, 48, 0.45),
        inset 0 2px 2px rgba(255, 255, 255, 0.7) !important;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 900 !important;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;

    animation:
        pgHexFlagsButtonEntrance
        0.58s
        0.28s
        cubic-bezier(0.2, 1.3, 0.4, 1)
        both;
}

/* لمعة زر الإجابة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-show-answer:not(.pg-hex-hidden)::after {
    content: "";

    position: absolute;
    top: -80%;
    left: -35%;

    width: 24%;
    height: 260%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.82),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pgHexFlagsButtonShine
        3.5s
        ease-in-out
        infinite;
}

html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-show-answer:not(.pg-hex-hidden):hover {
    transform: translateY(-3px);
    filter: brightness(1.08);

    box-shadow:
        0 10px 0 #bf6500,
        0 17px 28px rgba(0, 0, 0, 0.4),
        0 0 37px rgba(255, 190, 48, 0.65) !important;
}

html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-show-answer:not(.pg-hex-hidden):active {
    transform: translateY(5px);

    box-shadow:
        0 3px 0 #bf6500,
        0 7px 13px rgba(0, 0, 0, 0.32) !important;
}

/* ==================================================
   صفحة الإجابة
   ================================================== */

/* إخفاء السؤال والمؤقت واسم الفريق */
html body
#pg-hex-question-overlay.pg-hex-flags-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text,

html body
#pg-hex-question-overlay.pg-hex-flags-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer,

html body
#pg-hex-question-overlay.pg-hex-flags-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}

/* إبقاء العلم ظاهرًا في صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-image:not(.pg-hex-hidden) {
    display: block !important;

    width: min(650px, 59vw) !important;
    height: min(335px, 42vh) !important;

    margin:
        63px
        auto
        0 !important;
    padding: 15px !important;

    object-fit: contain !important;

    border: 5px solid #ffffff !important;
    border-radius: 27px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edfaff
        ) !important;

    box-shadow:
        0 10px 0 #176aa0,
        0 19px 34px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(82, 221, 255, 0.34) !important;

    animation:
        pgHexFlagsAnswerImageEntrance
        0.65s
        ease
        both;
}

/* بطاقة اسم الدولة تحت العلم */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 35 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: min(720px, 65vw);
    min-height: 125px;

    margin:
        30px
        auto
        18px !important;
    padding:
        20px
        30px !important;

    border: 3px solid #77e8ff !important;
    border-radius: 23px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(17, 143, 187, 0.98),
            rgba(23, 83, 163, 0.98),
            rgba(61, 50, 145, 0.98)
        ) !important;

    box-shadow:
        0 9px 0 #093170,
        0 17px 30px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(77, 220, 255, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;

    text-align: center;

    animation:
        pgHexFlagsAnswerEntrance
        0.68s
        cubic-bezier(0.2, 1.15, 0.3, 1)
        both;
}

/* عنوان الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-answer-area:not(.pg-hex-hidden)
> span {
    display: block;

    margin-bottom: 7px;

    color: #c8f7ff;

    font-size:
        clamp(
            17px,
            1.55vw,
            22px
        );
    font-weight: 900;
}

/* اسم الدولة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-answer-text {
    color: #ffffff !important;

    font-size:
        clamp(
            31px,
            3.8vw,
            52px
        ) !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;

    text-shadow:
        0 4px 7px rgba(0, 0, 0, 0.36),
        0 0 20px rgba(104, 232, 255, 0.3);
}

/* أزرار التحكيم */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    z-index: 45 !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: min(680px, 65vw);
    gap: 20px;

    margin:
        22px
        auto
        0 !important;
}

/* الشكل المشترك */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-judgement-buttons button {
    min-height: 59px;
    padding:
        11px
        24px !important;

    border: 3px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 18px !important;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 18px !important;
    font-weight: 900 !important;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

/* الصحيح */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-correct-button {
    background:
        linear-gradient(
            145deg,
            #25cc80,
            #078d59
        ) !important;

    box-shadow:
        0 8px 0 #046442,
        0 14px 24px rgba(0, 0, 0, 0.33),
        0 0 22px rgba(41, 224, 139, 0.3) !important;
}

/* الخطأ */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-wrong-button {
    background:
        linear-gradient(
            145deg,
            #ff5673,
            #bd2145
        ) !important;

    box-shadow:
        0 8px 0 #821631,
        0 14px 24px rgba(0, 0, 0, 0.33),
        0 0 22px rgba(255, 73, 108, 0.3) !important;
}

html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-judgement-buttons button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

html body
#pg-hex-question-overlay.pg-hex-flags-mode
#pg-hex-judgement-buttons button:active {
    transform: translateY(5px);
    box-shadow: none !important;
}

/* ==================================================
   مؤثرات الخلفية الخاصة بالأعلام
   ================================================== */

/* الكرة الأرضية الكبيرة */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-card::before {
    content: "🌍" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 7% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            90px,
            10vw,
            150px
        ) !important;
    line-height: 1 !important;

    opacity: 0.3 !important;

    filter:
        drop-shadow(
            0 12px 20px rgba(0, 0, 0, 0.34)
        )
        drop-shadow(
            0 0 24px rgba(69, 216, 255, 0.38)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexFlagsGlobeFloat
        7s
        ease-in-out
        infinite
        alternate !important;
}

/* رموز السفر والأعلام */
html body
#pg-hex-question-overlay.pg-hex-flags-mode
.pg-hex-question-card::after {
    content:
        "🚩   🗺️   🧭   🌎   📍   🏳️" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            46px,
            5.5vw,
            82px
        ) !important;
    line-height: 1 !important;
    letter-spacing: 11px !important;
    white-space: nowrap !important;

    opacity: 0.19 !important;

    filter:
        drop-shadow(
            0 10px 18px rgba(0, 0, 0, 0.3)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexFlagsSymbolsFloat
        7.8s
        ease-in-out
        infinite
        alternate !important;
}

/* الحركات */
@keyframes pgHexFlagsScreenColors {
    from {
        background-position:
            0 0,
            0 0,
            0 0,
            0 0,
            0 0;
    }

    to {
        background-position:
            43px 28px,
            -38px 34px,
            32px -29px,
            -34px -25px,
            0 0;
    }
}

@keyframes pgHexFlagsMapRings {
    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            118px 78px,
            0 0;
    }
}

@keyframes pgHexFlagsGlobeFloat {
    from {
        translate: 0 0;
        rotate: -8deg;
        scale: 0.92;
    }

    to {
        translate: -34px 24px;
        rotate: 8deg;
        scale: 1.08;
    }
}

@keyframes pgHexFlagsSymbolsFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
    }

    to {
        translate: 38px -25px;
        rotate: -4deg;
    }
}

@keyframes pgHexFlagsQuestionEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-24px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexFlagsImageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(28px)
            scale(0.88)
            rotate(-2deg);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}

@keyframes pgHexFlagsButtonEntrance {
    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexFlagsButtonShine {
    0%,
    25% {
        left: -35%;
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    68% {
        left: 120%;
        opacity: 0.8;
    }

    69%,
    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes pgHexFlagsAnswerImageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(-18px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pgHexFlagsAnswerEntrance {
    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ==================================================
   الشاشات القصيرة
   ================================================== */

@media (max-height: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-flags-mode {
        padding: 6px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    .pg-hex-question-card {
        padding:
            11px
            25px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-question-timer {
        top: 15px !important;
        left: 21px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-question-team-name {
        top: 99px !important;
        left: 12px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-question-text {
        margin-top: 47px !important;
        padding:
            11px
            24px;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode:not(
        :has(#pg-hex-answer-area:not(.pg-hex-hidden))
    )
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: min(610px, 57vw) !important;
        height: min(305px, 40vh) !important;

        margin-top: 34px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-show-answer:not(.pg-hex-hidden) {
        min-height: 50px;

        margin-top: 26px !important;
        padding:
            9px
            24px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode:has(
        #pg-hex-answer-area:not(.pg-hex-hidden)
    )
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: min(570px, 55vw) !important;
        height: min(275px, 36vh) !important;

        margin-top: 48px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        min-height: 105px;

        margin-top: 22px !important;
        padding:
            14px
            26px !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        margin-top: 17px !important;
    }
}

/* الشاشات الضيقة */
@media (max-width: 760px) {
    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-question-text,
    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-answer-area:not(.pg-hex-hidden) {
        width: 92vw;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-question-image:not(.pg-hex-hidden) {
        width: 86vw !important;
    }

    html body
    #pg-hex-question-overlay.pg-hex-flags-mode
    #pg-hex-judgement-buttons:not(.pg-hex-hidden) {
        grid-template-columns: 1fr;

        width: 88vw;
    }
}
/* ==================================================
   الشبكة الرئيسية فقط:
   إلغاء إضاءة الألوان ونقلها للخلايا السداسية
   ================================================== */

/* إلغاء التوهج والنبض عن اللون الأخضر */
html body
#pg-hex-game-screen
.pg-hex-border-top,
html body
#pg-hex-game-screen
.pg-hex-border-bottom {
    filter: none !important;

    box-shadow:
        inset 0 3px 5px rgba(255, 255, 255, 0.15),
        inset 0 -6px 10px rgba(0, 53, 31, 0.3) !important;

    animation: none !important;

    background:
        linear-gradient(
            90deg,
            #087d4a,
            #20ca70,
            #4be58e,
            #20ca70,
            #087d4a
        ) !important;
}

/* إلغاء التوهج والنبض عن اللون الأحمر */
html body
#pg-hex-game-screen
.pg-hex-border-left,
html body
#pg-hex-game-screen
.pg-hex-border-right {
    filter: none !important;

    box-shadow:
        inset 3px 0 5px rgba(255, 255, 255, 0.13),
        inset -6px 0 10px rgba(87, 0, 21, 0.3) !important;

    animation: none !important;

    background:
        linear-gradient(
            180deg,
            #99152b,
            #e42949,
            #f15b70,
            #e42949,
            #99152b
        ) !important;
}

/* إضاءة هادئة حول الخلايا السداسية الفارغة */
html body
#pg-hex-game-screen
button.pg-hex-cell:not(
    .pg-hex-owned-red
):not(
    .pg-hex-owned-green
) {
    filter:
        drop-shadow(
            0 7px 5px
            rgba(0, 0, 0, 0.3)
        )
        drop-shadow(
            0 0 5px
            rgba(87, 202, 255, 0.38)
        ) !important;

    animation:
        pgHexGentleCellGlow
        3.2s
        ease-in-out
        infinite
        alternate;
}

/* زيادة الإضاءة قليلًا عند المرور فوق الخلية */
html body
#pg-hex-game-screen
button.pg-hex-cell:not(
    .pg-hex-owned-red
):not(
    .pg-hex-owned-green
):hover {
    filter:
        drop-shadow(
            0 9px 7px
            rgba(0, 0, 0, 0.34)
        )
        drop-shadow(
            0 0 11px
            rgba(89, 211, 255, 0.68)
        ) !important;
}

/* نبضة خفيفة جدًا للخلايا */
@keyframes pgHexGentleCellGlow {
    from {
        filter:
            drop-shadow(
                0 7px 5px
                rgba(0, 0, 0, 0.3)
            )
            drop-shadow(
                0 0 3px
                rgba(87, 202, 255, 0.25)
            );
    }

    to {
        filter:
            drop-shadow(
                0 7px 5px
                rgba(0, 0, 0, 0.3)
            )
            drop-shadow(
                0 0 7px
                rgba(87, 202, 255, 0.48)
            );
    }
}
/* ==================================================
   الشبكة الرئيسية:
   حركة المسار الفائز قبل ظهور الاحتفالية
   ================================================== */

/* الشكل المشترك لخلايا المسار */
html body
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell {
    z-index: 30 !important;

    transform-origin: center;

    animation:
        pgHexWinningPathWave
        0.9s
        ease-in-out
        calc(
            var(--pg-hex-path-step, 0) *
            0.22s
        )
        infinite
        alternate !important;
}

/* سطح خلايا المسار الأحمر */
html body
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell.pg-hex-owned-red::before {
    animation:
        pgHexWinningRedSurface
        0.9s
        ease-in-out
        calc(
            var(--pg-hex-path-step, 0) *
            0.22s
        )
        infinite
        alternate !important;
}

/* سطح خلايا المسار الأخضر */
html body
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell.pg-hex-owned-green::before {
    animation:
        pgHexWinningGreenSurface
        0.9s
        ease-in-out
        calc(
            var(--pg-hex-path-step, 0) *
            0.22s
        )
        infinite
        alternate !important;
}

/* حلقة ضوئية تتحرك فوق كل خلية في المسار */
html body
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell::after {
    content: "" !important;

    position: absolute !important;
    inset: 8% !important;
    z-index: 4 !important;

    display: block !important;

    pointer-events: none;

    clip-path: inherit;

    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: inherit;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.5),
            transparent 62%
        ) !important;

    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.8),
        0 0 16px rgba(255, 255, 255, 0.8);

    animation:
        pgHexWinningPathRing
        0.9s
        ease-in-out
        calc(
            var(--pg-hex-path-step, 0) *
            0.22s
        )
        infinite
        alternate !important;
}

/* الرقم داخل خلية المسار */
html body
#pg-hex-game-screen
button.pg-hex-cell.pg-hex-winning-cell {
    color: #ffffff !important;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.65),
        0 0 8px rgba(255, 255, 255, 0.9) !important;
}

/* رسالة انتظار الاحتفالية */
html body
#pg-hex-game-screen
.pg-hex-question-message.pg-hex-win-message {
    border: 2px solid #ffffff !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #168fd0,
            #184eaa,
            #39288e
        ) !important;

    box-shadow:
        0 7px 0 #092c70,
        0 13px 24px rgba(0, 0, 0, 0.34),
        0 0 27px rgba(83, 218, 255, 0.48) !important;

    animation:
        pgHexWinningMessagePulse
        1s
        ease-in-out
        infinite
        alternate !important;
}

/* حركة ارتفاع الخلية وانخفاضها */
@keyframes pgHexWinningPathWave {
    0% {
        scale: 1;

        filter:
            brightness(1)
            drop-shadow(
                0 7px 5px
                rgba(0, 0, 0, 0.34)
            );
    }

    100% {
        scale: 1.11;

        filter:
            brightness(1.3)
            drop-shadow(
                0 9px 7px
                rgba(0, 0, 0, 0.38)
            )
            drop-shadow(
                0 0 18px
                rgba(255, 255, 255, 0.9)
            );
    }
}

/* وميض المسار الأحمر بين الأحمر والأبيض */
@keyframes pgHexWinningRedSurface {
    0% {
        background:
            linear-gradient(
                145deg,
                #ff6e7d,
                #e21e43,
                #96142e
            );
    }

    48% {
        background:
            linear-gradient(
                145deg,
                #ff8090,
                #ed3152,
                #ae1936
            );
    }

    100% {
        background:
            linear-gradient(
                145deg,
                #ffffff,
                #ffe8ec,
                #ffbdc7
            );
    }
}

/* وميض المسار الأخضر بين الأخضر والأبيض */
@keyframes pgHexWinningGreenSurface {
    0% {
        background:
            linear-gradient(
                145deg,
                #72ee9a,
                #1fc66c,
                #087a46
            );
    }

    48% {
        background:
            linear-gradient(
                145deg,
                #87f5ab,
                #35d77e,
                #0b9253
            );
    }

    100% {
        background:
            linear-gradient(
                145deg,
                #ffffff,
                #e2fff0,
                #b9ffd6
            );
    }
}

/* حركة الحلقة البيضاء */
@keyframes pgHexWinningPathRing {
    0% {
        opacity: 0.15;
        transform: scale(0.78);
    }

    100% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* نبضة رسالة الفوز */
@keyframes pgHexWinningMessagePulse {
    from {
        transform: scale(0.98);
        filter: brightness(0.95);
    }

    to {
        transform: scale(1.03);
        filter: brightness(1.14);
    }
}
/* ==================================================
   زوم داخل الشبكة فقط:
   خلفية فخمة وراقية ومحسّنة
   ================================================== */

/* خلفية الشاشة الخارجية */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode {
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 11% 17%,
            rgba(255, 211, 72, 0.3) 0 5%,
            transparent 20%
        ),
        radial-gradient(
            circle at 88% 19%,
            rgba(66, 225, 255, 0.28) 0 7%,
            transparent 23%
        ),
        radial-gradient(
            circle at 82% 85%,
            rgba(180, 86, 255, 0.26) 0 8%,
            transparent 25%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(45, 226, 165, 0.2) 0 7%,
            transparent 23%
        ),
        linear-gradient(
            145deg,
            #04132f 0%,
            #0c3971 43%,
            #243983 70%,
            #48206f 100%
        ) !important;

    background-size:
        115% 115%,
        120% 120%,
        118% 118%,
        122% 122%,
        auto;

    animation:
        pgHexZoomLuxuryScreenMove
        13s
        ease-in-out
        infinite
        alternate !important;
}

/* بطاقة الصفحة ودوائر التركيز */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(80, 218, 255, 0.11) 0 2%,
            transparent 3% 15%,
            rgba(80, 218, 255, 0.07) 16% 16.8%,
            transparent 17.2% 29%,
            rgba(156, 104, 255, 0.065) 30% 30.8%,
            transparent 31.2% 44%,
            rgba(255, 255, 255, 0.035) 45% 45.7%,
            transparent 46.2%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 74px,
            rgba(113, 223, 255, 0.027)
                75px 77px,
            transparent 78px 150px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 74px,
            rgba(113, 223, 255, 0.022)
                75px 77px,
            transparent 78px 150px
        ),
        linear-gradient(
            145deg,
            rgba(5, 30, 72, 0.88),
            rgba(17, 65, 125, 0.76),
            rgba(54, 28, 105, 0.84)
        ) !important;

    border-color:
        rgba(103, 224, 255, 0.82) !important;

    box-shadow:
        inset 0 0 110px rgba(61, 204, 255, 0.13),
        inset 0 0 40px rgba(177, 93, 255, 0.08),
        0 0 32px rgba(54, 193, 255, 0.25) !important;

    animation:
        pgHexZoomLuxuryFocusPulse
        6s
        ease-in-out
        infinite
        alternate !important;
}

/* العدسة الكبيرة المتحركة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::before {
    content: "🔍" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 7% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            95px,
            10vw,
            160px
        ) !important;
    line-height: 1 !important;

    opacity: 0.32 !important;

    filter:
        drop-shadow(
            0 13px 21px
            rgba(0, 0, 0, 0.36)
        )
        drop-shadow(
            0 0 27px
            rgba(73, 218, 255, 0.48)
        ) !important;

    transform-origin: center !important;
    pointer-events: none !important;

    animation:
        pgHexZoomLuxuryLensFloat
        6.8s
        ease-in-out
        infinite
        alternate !important;
}

/* رموز الزوم والتركيز في الأسفل */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::after {
    content:
        "🔎   ◉   ⊕   🔍   ◎   ✦" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: rgba(255, 255, 255, 0.72) !important;
    background: none !important;
    box-shadow: none !important;

    font-family:
        Arial,
        sans-serif !important;
    font-size:
        clamp(
            47px,
            5.8vw,
            86px
        ) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 11px !important;
    white-space: nowrap !important;

    opacity: 0.2 !important;

    text-shadow:
        0 0 23px rgba(70, 219, 255, 0.62),
        0 9px 17px rgba(0, 0, 0, 0.32) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomLuxuryIconsFloat
        7.8s
        ease-in-out
        infinite
        alternate !important;
}

/* إبقاء عناصر زوم فوق الخلفية */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* توهج راقٍ حول صورة الزوم */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-image:not(.pg-hex-hidden) {
    box-shadow:
        0 11px 0 #0b397b,
        0 20px 36px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(77, 220, 255, 0.36),
        0 0 52px rgba(138, 91, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* توهج الصورة الكاملة في صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-answer-image:not(.pg-hex-hidden) {
    box-shadow:
        0 11px 0 #27317f,
        0 20px 36px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(165, 103, 255, 0.34),
        0 0 52px rgba(72, 213, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* حركة ألوان الشاشة */
@keyframes pgHexZoomLuxuryScreenMove {
    from {
        background-position:
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0 0;
    }

    to {
        background-position:
            5% 6%,
            94% 7%,
            94% 94%,
            6% 93%,
            0 0;
    }
}

/* نبضة دوائر التركيز */
@keyframes pgHexZoomLuxuryFocusPulse {
    from {
        background-position:
            50% 48%,
            0 0,
            0 0,
            0 0;

        box-shadow:
            inset 0 0 80px rgba(61, 204, 255, 0.08),
            inset 0 0 30px rgba(177, 93, 255, 0.05),
            0 0 25px rgba(54, 193, 255, 0.18);
    }

    to {
        background-position:
            52% 46%,
            75px 0,
            0 75px,
            0 0;

        box-shadow:
            inset 0 0 130px rgba(61, 204, 255, 0.16),
            inset 0 0 55px rgba(177, 93, 255, 0.1),
            0 0 38px rgba(54, 193, 255, 0.3);
    }
}

/* حركة العدسة الكبيرة */
@keyframes pgHexZoomLuxuryLensFloat {
    from {
        translate: 0 0;
        rotate: -9deg;
        scale: 0.9;
    }

    55% {
        translate: -22px 15px;
        rotate: 3deg;
        scale: 1.1;
    }

    to {
        translate: -38px 27px;
        rotate: 10deg;
        scale: 0.98;
    }
}

/* حركة رموز الزوم */
@keyframes pgHexZoomLuxuryIconsFloat {
    from {
        translate: 0 0;
        rotate: 5deg;
        scale: 0.94;
    }

    to {
        translate: 38px -25px;
        rotate: -5deg;
        scale: 1.07;
    }
}
/* ==================================================
   إصلاح خلفية زوم:
   إلغاء المربعات واستبدالها بخلفية ناعمة وراقية
   ================================================== */

/* خلفية خارجية ناعمة من دون مربعات */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode {
    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(64, 224, 255, 0.32),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 88% 21%,
            rgba(126, 92, 255, 0.3),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 78% 86%,
            rgba(224, 81, 255, 0.23),
            transparent 37%
        ),
        radial-gradient(
            ellipse at 19% 82%,
            rgba(41, 225, 177, 0.2),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #04132f 0%,
            #0a3268 37%,
            #253b86 68%,
            #4b206e 100%
        ) !important;

    background-size:
        120% 120%,
        125% 125%,
        120% 120%,
        125% 125%,
        auto !important;

    animation:
        pgHexZoomSmoothAurora
        11s
        ease-in-out
        infinite
        alternate !important;
}

/* إلغاء المربعات داخل بطاقة زوم */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card {
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(107, 228, 255, 0.12) 0 2%,
            transparent 2.5% 17%,
            rgba(107, 228, 255, 0.07) 17.5% 18.2%,
            transparent 18.7% 32%,
            rgba(175, 111, 255, 0.065) 32.5% 33.2%,
            transparent 33.7% 48%,
            rgba(255, 255, 255, 0.035) 48.5% 49.1%,
            transparent 49.6%
        ),
        radial-gradient(
            ellipse at 22% 28%,
            rgba(53, 210, 255, 0.12),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 82% 72%,
            rgba(174, 89, 255, 0.13),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(5, 28, 70, 0.91),
            rgba(16, 62, 123, 0.82),
            rgba(57, 28, 108, 0.88)
        ) !important;

    border-color:
        rgba(108, 227, 255, 0.82) !important;

    box-shadow:
        inset 0 0 125px rgba(67, 210, 255, 0.13),
        inset 0 0 55px rgba(178, 91, 255, 0.08),
        0 0 34px rgba(58, 202, 255, 0.26) !important;

    animation:
        pgHexZoomSmoothFocusBreath
        5.8s
        ease-in-out
        infinite
        alternate !important;
}

/* عدسة كبيرة أوضح وأجمل */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::before {
    content: "🔍" !important;

    position: absolute !important;
    z-index: 1 !important;

    top: 8% !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: initial !important;
    background: none !important;
    box-shadow: none !important;

    font-size:
        clamp(
            100px,
            10.5vw,
            165px
        ) !important;
    line-height: 1 !important;

    opacity: 0.3 !important;

    filter:
        drop-shadow(
            0 13px 22px
            rgba(0, 0, 0, 0.36)
        )
        drop-shadow(
            0 0 30px
            rgba(74, 220, 255, 0.52)
        ) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomSmoothLensMove
        6.7s
        ease-in-out
        infinite
        alternate !important;
}

/* رموز تكبير هادئة في الأسفل */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card::after {
    content:
        "🔎   ◉   🔍   ◎" !important;

    position: absolute !important;
    z-index: 1 !important;

    right: auto !important;
    top: auto !important;
    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: rgba(255, 255, 255, 0.75) !important;
    background: none !important;
    box-shadow: none !important;

    font-family: Arial, sans-serif !important;
    font-size:
        clamp(
            48px,
            5.8vw,
            85px
        ) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 12px !important;
    white-space: nowrap !important;

    opacity: 0.18 !important;

    text-shadow:
        0 0 25px rgba(74, 220, 255, 0.68),
        0 10px 18px rgba(0, 0, 0, 0.32) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomSmoothIconsMove
        7.8s
        ease-in-out
        infinite
        alternate !important;
}

/* إبقاء المحتوى فوق المؤثرات */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* حركة الأضواء الناعمة */
@keyframes pgHexZoomSmoothAurora {
    from {
        background-position:
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0 0;
    }

    to {
        background-position:
            7% 8%,
            93% 9%,
            92% 92%,
            8% 91%,
            0 0;
    }
}

/* تنفس دوائر التركيز */
@keyframes pgHexZoomSmoothFocusBreath {
    from {
        filter: brightness(0.96);

        box-shadow:
            inset 0 0 90px rgba(67, 210, 255, 0.09),
            inset 0 0 40px rgba(178, 91, 255, 0.05),
            0 0 26px rgba(58, 202, 255, 0.19);
    }

    to {
        filter: brightness(1.06);

        box-shadow:
            inset 0 0 145px rgba(67, 210, 255, 0.17),
            inset 0 0 70px rgba(178, 91, 255, 0.11),
            0 0 40px rgba(58, 202, 255, 0.31);
    }
}

/* حركة العدسة */
@keyframes pgHexZoomSmoothLensMove {
    from {
        translate: 0 0;
        rotate: -8deg;
        scale: 0.92;
    }

    to {
        translate: -36px 25px;
        rotate: 8deg;
        scale: 1.07;
    }
}

/* حركة رموز التكبير */
@keyframes pgHexZoomSmoothIconsMove {
    from {
        translate: 0 0;
        rotate: 4deg;
    }

    to {
        translate: 36px -24px;
        rotate: -4deg;
    }
}
/* ==================================================
   إصلاح نهائي لخلفية سؤال زوم:
   إلغاء المربعات والنقاط القديمة بالقوة
   ================================================== */

/* الخلفية الأساسية لسؤال زوم فقط */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
) {
    background-color: #07183e !important;

    background-image:
        radial-gradient(
            ellipse at 8% 15%,
            rgba(57, 222, 255, 0.38),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 92% 20%,
            rgba(114, 98, 255, 0.35),
            transparent 36%
        ),
        radial-gradient(
            ellipse at 80% 92%,
            rgba(218, 75, 255, 0.28),
            transparent 39%
        ),
        radial-gradient(
            ellipse at 15% 88%,
            rgba(38, 225, 174, 0.23),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #04132f 0%,
            #0b3973 38%,
            #263d8b 68%,
            #4c206f 100%
        ) !important;

    background-size:
        125% 125%,
        130% 130%,
        125% 125%,
        130% 130%,
        auto !important;

    animation:
        pgHexZoomFinalAurora
        10s
        ease-in-out
        infinite
        alternate !important;
}

/* إزالة نقاط الخلفية القديمة واستبدالها بأضواء ناعمة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)::before {
    content: "" !important;

    position: fixed !important;
    inset: -18% !important;
    z-index: 0 !important;

    width: 136vw !important;
    height: 136dvh !important;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(79, 226, 255, 0.23) 0 8%,
            transparent 24%
        ),
        radial-gradient(
            circle at 75% 25%,
            rgba(144, 102, 255, 0.21) 0 9%,
            transparent 27%
        ),
        radial-gradient(
            circle at 68% 78%,
            rgba(232, 89, 255, 0.18) 0 10%,
            transparent 29%
        ),
        radial-gradient(
            circle at 27% 75%,
            rgba(52, 228, 181, 0.16) 0 8%,
            transparent 25%
        ) !important;

    background-size: auto !important;
    background-position: center !important;

    opacity: 1 !important;

    filter:
        blur(9px)
        saturate(1.18) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomFinalLightClouds
        12s
        ease-in-out
        infinite
        alternate !important;
}

/* إلغاء شبكة المربعات من بطاقة الصفحة بالقوة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
.pg-hex-question-card {
    background-image:
        radial-gradient(
            circle at 50% 48%,
            rgba(94, 225, 255, 0.13) 0 2%,
            transparent 2.5% 18%,
            rgba(94, 225, 255, 0.075)
                18.5% 19.2%,
            transparent 19.7% 34%,
            rgba(175, 108, 255, 0.07)
                34.5% 35.2%,
            transparent 35.7% 51%,
            rgba(255, 255, 255, 0.038)
                51.5% 52.2%,
            transparent 52.7%
        ),
        radial-gradient(
            ellipse at 22% 25%,
            rgba(57, 211, 255, 0.15),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 82% 76%,
            rgba(183, 87, 255, 0.15),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(5, 29, 72, 0.83),
            rgba(16, 66, 127, 0.68),
            rgba(57, 27, 108, 0.78)
        ) !important;

    background-size:
        auto,
        auto,
        auto,
        auto !important;

    background-position:
        center,
        center,
        center,
        center !important;

    border:
        2px solid
        rgba(105, 226, 255, 0.72) !important;

    box-shadow:
        inset 0 0 135px rgba(63, 210, 255, 0.13),
        inset 0 0 65px rgba(181, 91, 255, 0.09),
        0 0 38px rgba(57, 202, 255, 0.27) !important;

    animation:
        pgHexZoomFinalFocusBreath
        5.5s
        ease-in-out
        infinite
        alternate !important;
}

/* حركة الخلفية الملونة */
@keyframes pgHexZoomFinalAurora {
    from {
        background-position:
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0 0;
    }

    to {
        background-position:
            9% 10%,
            91% 11%,
            90% 90%,
            10% 89%,
            0 0;
    }
}

/* حركة سحب الضوء */
@keyframes pgHexZoomFinalLightClouds {
    from {
        transform:
            translate3d(-2%, -2%, 0)
            rotate(-3deg)
            scale(0.96);
    }

    to {
        transform:
            translate3d(3%, 3%, 0)
            rotate(4deg)
            scale(1.06);
    }
}

/* تنفس دوائر التركيز */
@keyframes pgHexZoomFinalFocusBreath {
    from {
        filter:
            brightness(0.96)
            saturate(1);

        box-shadow:
            inset 0 0 95px rgba(63, 210, 255, 0.09),
            inset 0 0 45px rgba(181, 91, 255, 0.06),
            0 0 28px rgba(57, 202, 255, 0.2);
    }

    to {
        filter:
            brightness(1.07)
            saturate(1.08);

        box-shadow:
            inset 0 0 150px rgba(63, 210, 255, 0.17),
            inset 0 0 80px rgba(181, 91, 255, 0.12),
            0 0 43px rgba(57, 202, 255, 0.33);
    }
}
/* ==================================================
   زوم داخل الشبكة:
   تحسين خلفية صفحة الإجابة وإلغاء المربعات
   ================================================== */

/* خلفية صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
) {
    isolation: isolate !important;

    background:
        radial-gradient(
            ellipse at 10% 18%,
            rgba(61, 222, 255, 0.34),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 90% 20%,
            rgba(121, 96, 255, 0.32),
            transparent 36%
        ),
        radial-gradient(
            ellipse at 82% 88%,
            rgba(222, 79, 255, 0.27),
            transparent 39%
        ),
        radial-gradient(
            ellipse at 17% 84%,
            rgba(41, 225, 178, 0.2),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #04132f 0%,
            #0a356d 38%,
            #293d89 68%,
            #4d206f 100%
        ) !important;

    background-size:
        125% 125%,
        130% 130%,
        125% 125%,
        130% 130%,
        auto !important;

    animation:
        pgHexZoomAnswerAurora
        11s
        ease-in-out
        infinite
        alternate !important;
}

/* سحب ضوئية ناعمة خلف صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)::before {
    content: "" !important;

    position: fixed !important;
    inset: -18% !important;
    z-index: 0 !important;

    width: 136vw !important;
    height: 136dvh !important;

    background:
        radial-gradient(
            circle at 20% 27%,
            rgba(76, 225, 255, 0.22) 0 9%,
            transparent 26%
        ),
        radial-gradient(
            circle at 76% 25%,
            rgba(147, 104, 255, 0.21) 0 10%,
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 78%,
            rgba(231, 88, 255, 0.18) 0 10%,
            transparent 29%
        ),
        radial-gradient(
            circle at 27% 75%,
            rgba(53, 227, 183, 0.16) 0 9%,
            transparent 26%
        ) !important;

    opacity: 1 !important;

    filter:
        blur(10px)
        saturate(1.2) !important;

    pointer-events: none !important;

    animation:
        pgHexZoomAnswerClouds
        12s
        ease-in-out
        infinite
        alternate !important;
}

/* إزالة مربعات بطاقة صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-card {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(97, 226, 255, 0.12) 0 2%,
            transparent 2.5% 18%,
            rgba(97, 226, 255, 0.07)
                18.5% 19.2%,
            transparent 19.7% 34%,
            rgba(177, 108, 255, 0.068)
                34.5% 35.2%,
            transparent 35.7% 51%,
            rgba(255, 255, 255, 0.036)
                51.5% 52.2%,
            transparent 52.7%
        ),
        radial-gradient(
            ellipse at 22% 26%,
            rgba(58, 213, 255, 0.14),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 81% 76%,
            rgba(185, 89, 255, 0.15),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(5, 30, 73, 0.84),
            rgba(17, 66, 127, 0.7),
            rgba(58, 28, 109, 0.81)
        ) !important;

    background-size:
        auto,
        auto,
        auto,
        auto !important;

    border:
        2px solid
        rgba(108, 227, 255, 0.72) !important;

    box-shadow:
        inset 0 0 140px rgba(64, 211, 255, 0.13),
        inset 0 0 70px rgba(182, 91, 255, 0.1),
        0 0 40px rgba(58, 203, 255, 0.28) !important;

    animation:
        pgHexZoomAnswerFocusBreath
        5.8s
        ease-in-out
        infinite
        alternate !important;
}

/* إبقاء عناصر الإجابة فوق الخلفية */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
.pg-hex-question-card > * {
    position: relative;
    z-index: 5;
}

/* حركة ألوان صفحة الإجابة */
@keyframes pgHexZoomAnswerAurora {
    from {
        background-position:
            0% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0 0;
    }

    to {
        background-position:
            8% 9%,
            92% 10%,
            91% 91%,
            9% 90%,
            0 0;
    }
}

/* حركة السحب الضوئية */
@keyframes pgHexZoomAnswerClouds {
    from {
        transform:
            translate3d(-2%, -2%, 0)
            rotate(-3deg)
            scale(0.96);
    }

    to {
        transform:
            translate3d(3%, 3%, 0)
            rotate(4deg)
            scale(1.06);
    }
}

/* تنفس خلفية الإجابة */
@keyframes pgHexZoomAnswerFocusBreath {
    from {
        filter:
            brightness(0.97)
            saturate(1);

        box-shadow:
            inset 0 0 100px rgba(64, 211, 255, 0.09),
            inset 0 0 50px rgba(182, 91, 255, 0.06),
            0 0 30px rgba(58, 203, 255, 0.21);
    }

    to {
        filter:
            brightness(1.07)
            saturate(1.08);

        box-shadow:
            inset 0 0 155px rgba(64, 211, 255, 0.17),
            inset 0 0 85px rgba(182, 91, 255, 0.12),
            0 0 45px rgba(58, 203, 255, 0.34);
    }
}
/* ==================================================
   الشرح البصري السريع للعبة الشبكة
   لا يؤثر على لعبة البازل
================================================== */

/* زر مشاهدة الشرح */
#setup-screen .pg-mode-video-button {
    overflow: hidden;
    width: 34px;
    height: 34px;

    border-color: rgba(255, 255, 255, 0.9);
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #ffb11b,
            #ff6a18
        );

    box-shadow:
        0 5px 12px rgba(255, 106, 24, 0.34),
        inset 0 1px 2px rgba(255, 255, 255, 0.55);

    animation:
        pgModeVideoButtonPulse 2s ease-in-out infinite;
}

#setup-screen .pg-mode-video-button span {
    display: block;
    margin-right: 2px;
    font-size: 14px;
    line-height: 1;
}

#setup-screen .pg-mode-video-button:hover {
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #ffca3a,
            #ff4d19
        );
    transform: scale(1.12);
}

@keyframes pgModeVideoButtonPulse {
    0%,
    100% {
        box-shadow:
            0 5px 12px rgba(255, 106, 24, 0.32),
            0 0 0 0 rgba(255, 190, 46, 0.42);
    }

    50% {
        box-shadow:
            0 7px 18px rgba(255, 106, 24, 0.48),
            0 0 0 7px rgba(255, 190, 46, 0);
    }
}

/* يكون الشرح الجديد مخفيًا عند فتح شرح البازل */
.pg-hex-tutorial {
    display: none;
}

/* يظهر فقط عندما تفتح نافذة شرح الشبكة */
.pg-mode-info-overlay.pg-mode-info-hex
.pg-hex-tutorial {
    display: block;
}

/* تصميم نافذة شرح الشبكة */
.pg-mode-info-overlay.pg-mode-info-hex {
    padding: 14px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(32, 205, 255, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(117, 65, 255, 0.22),
            transparent 34%
        ),
        rgba(2, 9, 30, 0.9);
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box {
    overflow: hidden;
    width: min(720px, 96vw);
    min-height: 510px;
    padding: 22px 28px 20px;

    border:
        2px solid rgba(74, 211, 255, 0.9);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(41, 119, 220, 0.35),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #082e69,
            #10184c 60%,
            #26134f
        );

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.58),
        0 0 35px rgba(55, 196, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box::before,
.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    filter: blur(15px);
    pointer-events: none;
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box::before {
    top: -130px;
    right: -80px;
    background: rgba(0, 217, 255, 0.18);
    animation: pgTutorialLightMove 6s ease-in-out infinite alternate;
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box::after {
    bottom: -150px;
    left: -70px;
    background: rgba(136, 71, 255, 0.24);
    animation: pgTutorialLightMove 7s ease-in-out infinite alternate-reverse;
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-close,
.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-icon,
.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-title,
.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-text,
.pg-mode-info-overlay.pg-mode-info-hex
.pg-hex-tutorial {
    position: relative;
    z-index: 2;
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-icon {
    display: none;
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-title {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-text {
    margin-bottom: 12px;
    color: #aeeeff;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* نقاط تقدّم العرض */
.pg-hex-tutorial-progress {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
}

.pg-hex-tutorial-progress span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition:
        width 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.pg-hex-tutorial-progress span.is-active {
    width: 28px;
    border-radius: 10px;
    background: #48dbff;
    box-shadow: 0 0 12px rgba(72, 219, 255, 0.75);
}

/* مساحة المشهد */
.pg-hex-tutorial-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;

    border:
        1px solid rgba(118, 222, 255, 0.42);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 119, 210, 0.25),
            transparent 58%
        ),
        linear-gradient(
            160deg,
            rgba(4, 37, 87, 0.95),
            rgba(13, 19, 65, 0.96)
        );

    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.28);
}

/* الشبكة السداسية المصغرة */
.pg-hex-tutorial-board {
    position: absolute;
    top: 50%;
    right: 50%;
    display: grid;
    grid-template-columns: repeat(3, 58px);
    gap: 4px;
    transform: translate(50%, -50%);
}

.pg-tutorial-hex {
    display: grid;
    place-items: center;
    width: 58px;
    height: 52px;
    padding: 0;

    border: 2px solid rgba(200, 235, 255, 0.82);
    color: #112455;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #cde7fa
        );

    clip-path:
        polygon(
            25% 0,
            75% 0,
            100% 50%,
            75% 100%,
            25% 100%,
            0 50%
        );

    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 900;

    filter:
        drop-shadow(0 5px 3px rgba(0, 0, 0, 0.24));
}

.pg-tutorial-hex.red {
    border-color: #ff7690;
    background:
        linear-gradient(
            145deg,
            #ff5c78,
            #b50f39
        );
}

.pg-tutorial-hex.green {
    border-color: #65f5ae;
    background:
        linear-gradient(
            145deg,
            #39de8e,
            #087a4b
        );
}

.pg-tutorial-target {
    position: relative;
    cursor: default;
}

.pg-tutorial-hand {
    position: absolute;
    right: 58px;
    top: 72px;
    z-index: 4;
    font-size: 2.5rem;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.35));
}

/* بطاقات السؤال والنتيجة */
.pg-hex-tutorial-question,
.pg-hex-tutorial-result,
.pg-hex-tutorial-win {
    position: absolute;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
}

.pg-hex-tutorial-question,
.pg-hex-tutorial-result {
    top: 50%;
    right: 50%;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 300px;
    padding: 18px 24px;

    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;

    color: #ffffff;
    text-align: right;

    transform: translate(50%, -50%) scale(0.7);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42);
}

.pg-hex-tutorial-question {
    background:
        linear-gradient(
            135deg,
            #1f91df,
            #4937a4
        );
}

.pg-hex-tutorial-result {
    background:
        linear-gradient(
            135deg,
            #05a864,
            #087647
        );
}

.pg-hex-tutorial-question strong,
.pg-hex-tutorial-result strong {
    display: block;
    font-size: 1.25rem;
}

.pg-hex-tutorial-question small,
.pg-hex-tutorial-result small {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
}

.pg-tutorial-question-mark,
.pg-tutorial-correct {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;

    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);

    font-size: 2rem;
    font-weight: 900;
}

/* مشهد الفوز */
.pg-hex-tutorial-win {
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;

    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 900;

    background:
        radial-gradient(
            circle,
            rgba(21, 108, 187, 0.32),
            rgba(5, 17, 58, 0.88)
        );
}

.pg-tutorial-winning-path {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pg-tutorial-winning-path span {
    width: 62px;
    height: 55px;

    background:
        linear-gradient(
            145deg,
            #ff4869,
            #b50b34
        );

    clip-path:
        polygon(
            25% 0,
            75% 0,
            100% 50%,
            75% 100%,
            25% 100%,
            0 50%
        );

    filter:
        drop-shadow(0 0 8px rgba(255, 80, 106, 0.75));
}

.pg-tutorial-trophy {
    font-size: 3.4rem;
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.35));
}

/* الجملة السريعة أسفل المشهد */
.pg-hex-tutorial-caption {
    min-height: 29px;
    margin-top: 10px;

    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

/* زر إعادة العرض */
.pg-hex-tutorial-replay {
    margin-top: 8px;
    padding: 8px 18px;

    border:
        1px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);

    font-family: inherit;
    font-weight: 800;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.pg-hex-tutorial-replay:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* حركات العرض بعد تشغيله */
.pg-hex-tutorial.is-playing
.pg-tutorial-hand {
    animation:
        pgTutorialHandClick 2.2s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-target {
    animation:
        pgTutorialTargetSelect 10s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-hex-tutorial-question {
    animation:
        pgTutorialQuestionCard 10s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-hex-tutorial-result {
    animation:
        pgTutorialResultCard 10s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-hex-tutorial-board {
    animation:
        pgTutorialBoardSequence 10s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-hex-tutorial-win {
    animation:
        pgTutorialWinScene 10s ease forwards;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-winning-path span {
    animation:
        pgTutorialWinningHex 0.65s ease-in-out infinite alternate;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-winning-path span:nth-child(2) {
    animation-delay: 0.12s;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-winning-path span:nth-child(3) {
    animation-delay: 0.24s;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-winning-path span:nth-child(4) {
    animation-delay: 0.36s;
}

.pg-hex-tutorial.is-playing
.pg-tutorial-trophy {
    animation:
        pgTutorialTrophy 0.75s ease-in-out infinite alternate;
}

@keyframes pgTutorialHandClick {
    0% {
        opacity: 0;
        transform: translate(42px, 34px) scale(0.8);
    }

    25% {
        opacity: 1;
    }

    65% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    78% {
        transform: translate(0, 0) scale(0.78);
    }

    90% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
    }
}

@keyframes pgTutorialTargetSelect {
    0%,
    18% {
        color: #112455;
        background: linear-gradient(145deg, #ffffff, #cde7fa);
        filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.24));
    }

    22%,
    48% {
        color: #112455;
        background: linear-gradient(145deg, #fff7bd, #ffc93d);
        filter: drop-shadow(0 0 13px rgba(255, 213, 64, 0.9));
    }

    52%,
    100% {
        color: #ffffff;
        background: linear-gradient(145deg, #ff5471, #b70b34);
        filter: drop-shadow(0 0 13px rgba(255, 72, 105, 0.85));
    }
}

@keyframes pgTutorialQuestionCard {
    0%,
    21% {
        opacity: 0;
        transform: translate(50%, -50%) scale(0.7);
    }

    27%,
    43% {
        opacity: 1;
        transform: translate(50%, -50%) scale(1);
    }

    48%,
    100% {
        opacity: 0;
        transform: translate(50%, -50%) scale(0.85);
    }
}

@keyframes pgTutorialResultCard {
    0%,
    47% {
        opacity: 0;
        transform: translate(50%, -50%) scale(0.7);
    }

    53%,
    65% {
        opacity: 1;
        transform: translate(50%, -50%) scale(1);
    }

    70%,
    100% {
        opacity: 0;
        transform: translate(50%, -50%) scale(0.86);
    }
}

@keyframes pgTutorialBoardSequence {
    0%,
    21%,
    48%,
    67% {
        opacity: 1;
        filter: none;
    }

    27%,
    43%,
    53%,
    64% {
        opacity: 0.16;
        filter: blur(2px);
    }

    72%,
    100% {
        opacity: 0;
    }
}

@keyframes pgTutorialWinScene {
    0%,
    70% {
        opacity: 0;
        transform: scale(0.84);
    }

    77%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pgTutorialWinningHex {
    from {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 0 6px rgba(255, 80, 106, 0.55));
    }

    to {
        transform: translateY(-7px) scale(1.07);
        filter:
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.9));
    }
}

@keyframes pgTutorialTrophy {
    from {
        transform: translateY(0) rotate(-4deg);
    }

    to {
        transform: translateY(-8px) rotate(4deg) scale(1.08);
    }
}

@keyframes pgTutorialLightMove {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(35px, 25px) scale(1.2);
    }
}

/* ملاءمة الشاشات الصغيرة */
@media (max-width: 600px) {
    .pg-mode-info-overlay.pg-mode-info-hex
    .pg-mode-info-box {
        min-height: 480px;
        padding: 18px 12px 15px;
    }

    .pg-hex-tutorial-stage {
        height: 280px;
    }

    .pg-hex-tutorial-board {
        grid-template-columns: repeat(3, 51px);
    }

    .pg-tutorial-hex {
        width: 51px;
        height: 46px;
    }

    .pg-hex-tutorial-question,
    .pg-hex-tutorial-result {
        min-width: 260px;
        padding: 15px 17px;
    }

    .pg-tutorial-winning-path span {
        width: 51px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-mode-video-button,
    .pg-mode-info-overlay.pg-mode-info-hex *,
    .pg-mode-info-overlay.pg-mode-info-hex *::before,
    .pg-mode-info-overlay.pg-mode-info-hex *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* إصلاح نهائي لإظهار شرح لعبة الشبكة */
html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-hex-tutorial {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-hex-tutorial
.pg-hex-tutorial-stage {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 300px !important;
}
/* ==================================================
   التصميم الاحترافي الجديد لشاشة إعداد المباراة
   هوية مشتركة بين البازل والشبكة
================================================== */

html body #setup-screen {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    padding: 28px 18px 55px;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255, 62, 103, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 18%,
            rgba(19, 221, 142, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 50% 65%,
            rgba(79, 96, 255, 0.2),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #061735 0%,
            #092f62 42%,
            #20144f 72%,
            #071c3d 100%
        ) !important;

    background-size: 130% 130%;
    animation:
        pgSetupPremiumBackground 15s ease-in-out infinite alternate;
}

/* شبكة ضوئية فنية في الخلفية */
html body #setup-screen::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(94, 208, 255, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(94, 208, 255, 0.045) 1px,
            transparent 1px
        );

    background-size: 52px 52px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8),
            transparent 92%
        );

    animation:
        pgSetupGridMove 18s linear infinite;
}

/* وهج مركزي متحرك */
html body #setup-screen::after {
    content: "";
    position: fixed;
    top: 7%;
    right: 50%;
    z-index: 0;

    width: min(900px, 88vw);
    height: 420px;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(42, 174, 255, 0.2),
            rgba(93, 47, 217, 0.1) 45%,
            transparent 72%
        );

    filter: blur(25px);
    transform: translateX(50%);
    pointer-events: none;

    animation:
        pgSetupAurora 8s ease-in-out infinite alternate;
}

/* تحويل بعض قطع البازل العائمة إلى خلايا شبكة */
html body #setup-screen
.setup-floating-puzzles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

html body #setup-screen
.floating-puzzle {
    opacity: 0.12;
    color: #74dcff;
    filter:
        drop-shadow(0 0 10px rgba(82, 209, 255, 0.6));

    animation:
        pgSetupSymbolFloat 13s ease-in-out infinite;
}

html body #setup-screen
.floating-puzzle:nth-child(even) {
    font-size: 0 !important;
    color: transparent;
}

html body #setup-screen
.floating-puzzle:nth-child(even)::before {
    content: "⬡";
    display: block;
    color: #58efb0;
    font-size: 55px;
    font-weight: 900;

    filter:
        drop-shadow(0 0 12px rgba(41, 227, 143, 0.55));
}

html body #setup-screen
.floating-puzzle:nth-child(3n)::before {
    color: #ff5777;
    filter:
        drop-shadow(0 0 12px rgba(255, 63, 101, 0.5));
}

/* الحاوية الرئيسية */
html body #setup-screen
.setup-shell {
    position: relative;
    z-index: 2;
    width: min(1240px, 96vw);
    margin: 0 auto;
}

/* الشعار */
html body #setup-screen
.setup-logo {
    margin-bottom: 15px;
}

html body #setup-screen
.logo-image {
    max-height: 105px;
    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 16px rgba(71, 204, 255, 0.24));
}

/* اللوحة الزجاجية الرئيسية */
html body #setup-screen
.setup-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 25px 30px 30px;

    border:
        1px solid rgba(117, 218, 255, 0.5);
    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 53, 105, 0.91),
            rgba(15, 32, 81, 0.94) 52%,
            rgba(42, 22, 91, 0.92)
        ) !important;

    backdrop-filter: blur(18px);

    box-shadow:
        0 32px 85px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(255, 255, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -35px 80px rgba(0, 0, 0, 0.12);
}

/* خط علوي يجمع ألوان الفريقين */
html body #setup-screen
.setup-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 6%;
    left: 6%;
    height: 4px;
    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            #ff365e,
            #ffcb42 28%,
            #55dfff 50%,
            #69ecb1 72%,
            #13c77b
        );

    box-shadow:
        0 0 20px rgba(78, 212, 255, 0.7);
}

/* عنوان إعداد المباراة */
html body #setup-screen
.setup-title {
    width: fit-content;
    margin: 0 auto 20px;
    padding: 10px 28px;

    border:
        1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(16, 127, 211, 0.75),
            rgba(83, 48, 178, 0.72)
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 900;
    letter-spacing: 0.3px;
}

/* بطاقة الرصيد */
html body #setup-screen
.pg-setup-balance-card {
    border:
        1px solid rgba(102, 220, 255, 0.34) !important;
    border-radius: 23px !important;

    background:
        linear-gradient(
            135deg,
            rgba(6, 33, 76, 0.82),
            rgba(24, 30, 83, 0.76)
        ) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body #setup-screen
.pg-setup-credit {
    border-color:
        rgba(111, 215, 255, 0.24) !important;

    background:
        rgba(255, 255, 255, 0.055) !important;
}

/* بطاقة أسماء الفريقين */
html body #setup-screen
.teams-setup {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        72px
        minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    padding: 19px;

    border:
        1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            rgba(223, 28, 70, 0.16),
            rgba(17, 47, 101, 0.7) 42%,
            rgba(17, 47, 101, 0.7) 58%,
            rgba(0, 190, 112, 0.16)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.18);
}

html body #setup-screen
.team-input-group {
    min-width: 0;
    padding: 13px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 18px !important;

    background:
        rgba(5, 26, 68, 0.58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

html body #setup-screen
.team-input-group:first-child {
    border-color:
        rgba(255, 77, 111, 0.52) !important;
    box-shadow:
        inset 4px 0 0 #ff3e63,
        0 7px 18px rgba(255, 41, 81, 0.1) !important;
}

html body #setup-screen
.team-input-group:last-child {
    border-color:
        rgba(54, 229, 148, 0.48) !important;
    box-shadow:
        inset -4px 0 0 #21d98a,
        0 7px 18px rgba(28, 216, 134, 0.1) !important;
}

html body #setup-screen
.team-input-group label {
    margin-bottom: 7px;
    color: #caefff !important;
    font-weight: 800;
}

html body #setup-screen
.team-input-group input {
    width: 100%;
    height: 48px;

    border:
        1px solid rgba(145, 221, 255, 0.42) !important;
    border-radius: 13px !important;

    color: #0b2452 !important;
    background:
        linear-gradient(
            180deg,
            #ffffff,
            #eaf7ff
        ) !important;

    text-align: center;
    font-weight: 900;

    box-shadow:
        inset 0 2px 5px rgba(15, 52, 93, 0.1) !important;
}

html body #setup-screen
.team-input-group input:focus {
    border-color: #5cdeff !important;
    box-shadow:
        0 0 0 4px rgba(67, 209, 255, 0.17),
        0 0 18px rgba(72, 211, 255, 0.2) !important;
}

html body #setup-screen
.versus-badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: auto;

    border:
        2px solid rgba(255, 220, 82, 0.85) !important;
    border-radius: 50%;

    color: #173264 !important;
    background:
        linear-gradient(
            145deg,
            #fff08a,
            #ffb82d
        ) !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(255, 195, 49, 0.27) !important;

    font-size: 1.08rem;
    font-weight: 900;
}

/* عناوين أقسام الإعداد */
html body #setup-screen
.setup-section-title {
    margin: 22px 0 12px !important;
}

html body #setup-screen
.setup-section-title h3 {
    padding: 7px 18px;
    border-radius: 12px;

    color: #ffffff !important;
    background:
        rgba(6, 31, 76, 0.58);

    font-size: 1.15rem;
    font-weight: 900;
}

html body #setup-screen
.setup-section-title > span {
    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #45d7ff,
            #9c70ff,
            transparent
        ) !important;
}

/* أزرار عدد الجولات */
html body #setup-screen
.round-options {
    gap: 13px;
    padding: 15px;

    border:
        1px solid rgba(99, 216, 255, 0.28);
    border-radius: 21px;

    background:
        rgba(3, 27, 67, 0.48);
}

html body #setup-screen
.round-option {
    min-height: 60px;

    border:
        1px solid rgba(122, 215, 255, 0.34) !important;
    border-radius: 15px !important;

    color: #dff6ff !important;
    background:
        linear-gradient(
            145deg,
            rgba(15, 66, 122, 0.86),
            rgba(24, 37, 92, 0.9)
        ) !important;

    box-shadow:
        0 8px 17px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body #setup-screen
.round-option:not(:disabled):hover {
    border-color: #6ee4ff !important;
    transform: translateY(-3px);
    box-shadow:
        0 12px 23px rgba(0, 0, 0, 0.24),
        0 0 17px rgba(66, 211, 255, 0.18) !important;
}

html body #setup-screen
.round-option.selected {
    border-color: #ffd454 !important;
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #087fc8,
            #4b49df
        ) !important;

    box-shadow:
        0 10px 24px rgba(33, 105, 227, 0.33),
        0 0 0 2px rgba(255, 211, 71, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* مخطط اختيار البازل أو الشبكة لكل جولة */
html body #setup-screen
.pg-round-mode-planner {
    overflow: hidden;
    margin-top: 17px;
    padding: 18px;

    border:
        1px solid rgba(101, 217, 255, 0.4) !important;
    border-radius: 24px !important;

    background:
        linear-gradient(
            135deg,
            rgba(5, 45, 92, 0.84),
            rgba(27, 31, 91, 0.8)
        ) !important;

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

html body #setup-screen
.pg-round-mode-planner-title {
    padding: 10px 13px 15px;
    color: #ffffff !important;
}

html body #setup-screen
.pg-round-mode-list {
    gap: 10px;
}

html body #setup-screen
.pg-round-mode-row {
    border:
        1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 16px !important;

    background:
        rgba(255, 255, 255, 0.065) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body #setup-screen
.pg-round-mode-row > strong {
    color: #dff7ff !important;
}

html body #setup-screen
.pg-round-mode-button {
    border-radius: 12px !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease !important;
}

html body #setup-screen
.pg-round-mode-button[data-round-mode="puzzle"] {
    border-color:
        rgba(255, 196, 55, 0.38) !important;
    color: #fff0af !important;
    background:
        linear-gradient(
            145deg,
            rgba(171, 88, 18, 0.5),
            rgba(78, 44, 103, 0.72)
        ) !important;
}

html body #setup-screen
.pg-round-mode-button[data-round-mode="hex"] {
    border-color:
        rgba(59, 226, 151, 0.4) !important;
    color: #c5ffe3 !important;
    background:
        linear-gradient(
            145deg,
            rgba(14, 124, 98, 0.58),
            rgba(23, 54, 103, 0.76)
        ) !important;
}

html body #setup-screen
.pg-round-mode-button.selected {
    transform: translateY(-2px);
    filter: brightness(1.16);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 0 0 2px rgba(255, 255, 255, 0.22) !important;
}

/* شبكة الفئات */
html body #setup-screen
.categories-grid {
    gap: 11px !important;
    padding: 17px;

    border:
        1px solid rgba(99, 215, 255, 0.28);
    border-radius: 24px;

    background:
        rgba(3, 25, 65, 0.48);
}

html body #setup-screen
.category-card {
    overflow: hidden;
    min-height: 108px;

    border:
        1px solid rgba(104, 206, 255, 0.27) !important;
    border-radius: 17px !important;

    color: #ffffff !important;
    background:
        linear-gradient(
            150deg,
            rgba(18, 71, 127, 0.86),
            rgba(24, 38, 92, 0.9)
        ) !important;

    box-shadow:
        0 8px 17px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

html body #setup-screen
.category-card:hover {
    border-color: #68dfff !important;
    transform: translateY(-5px) scale(1.015);
    box-shadow:
        0 14px 25px rgba(0, 0, 0, 0.25),
        0 0 17px rgba(68, 211, 255, 0.16) !important;
}

html body #setup-screen
.category-card:has(input:checked) {
    border-color: #ffd75d !important;

    background:
        linear-gradient(
            145deg,
            #107fc8,
            #5643c6
        ) !important;

    box-shadow:
        0 11px 25px rgba(29, 103, 221, 0.33),
        0 0 0 2px rgba(255, 215, 93, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
}

html body #setup-screen
.category-icon {
    filter:
        drop-shadow(0 5px 5px rgba(0, 0, 0, 0.28));
}

html body #setup-screen
.category-name {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* زر بدء المباراة */
html body #setup-screen
.setup-start-btn {
    min-height: 67px;
    margin-top: 20px;

    border:
        2px solid rgba(255, 237, 150, 0.88) !important;
    border-radius: 19px !important;

    color: #ffffff !important;
    background:
        linear-gradient(
            100deg,
            #f12f57,
            #ff7b24 28%,
            #7351e5 55%,
            #079f73 100%
        ) !important;

    background-size: 180% 100% !important;

    box-shadow:
        0 13px 29px rgba(0, 0, 0, 0.3),
        0 0 23px rgba(87, 207, 255, 0.19),
        inset 0 2px 0 rgba(255, 255, 255, 0.25) !important;

    font-size: 1.28rem;
    font-weight: 900;

    animation:
        pgSetupStartButtonColors 5s ease-in-out infinite alternate;
}

html body #setup-screen
.setup-start-btn:hover {
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.09);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(255, 207, 75, 0.22) !important;
}

/* زر الرجوع */
html body #setup-screen
.setup-back-btn,
html body #setup-screen
.back-btn {
    color: #bfeaff !important;
    opacity: 0.9;
}

/* الحركات */
@keyframes pgSetupPremiumBackground {
    from {
        background-position:
            0% 0%;
    }

    to {
        background-position:
            100% 75%;
    }
}

@keyframes pgSetupGridMove {
    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            52px 52px,
            52px 52px;
    }
}

@keyframes pgSetupAurora {
    from {
        opacity: 0.65;
        transform:
            translateX(50%)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateX(50%)
            scale(1.12);
    }
}

@keyframes pgSetupSymbolFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-30px)
            rotate(12deg);
    }
}

@keyframes pgSetupStartButtonColors {
    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            100% 50%;
    }
}

/* توافق الأجهزة الصغيرة */
@media (max-width: 760px) {
    html body #setup-screen
    .setup-panel {
        padding:
            20px 13px 25px;
        border-radius: 23px;
    }

    html body #setup-screen
    .teams-setup {
        grid-template-columns: 1fr;
    }

    html body #setup-screen
    .versus-badge {
        width: 52px;
        height: 52px;
    }

    html body #setup-screen
    .categories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        padding: 11px;
    }

    html body #setup-screen
    .pg-round-mode-row {
        gap: 8px;
    }
}/* ==================================================
   إعادة تصميم اختيار نمط كل جولة
   وتحسين الحركة في خلفية شاشة الإعداد
================================================== */

/* خلفية أكثر حياة ووضوحًا */
html body #setup-screen {
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(255, 47, 97, 0.28),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 14%,
            rgba(19, 224, 150, 0.25),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 72%,
            rgba(111, 68, 255, 0.3),
            transparent 35%
        ),
        radial-gradient(
            circle at 25% 80%,
            rgba(31, 173, 255, 0.27),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061530,
            #073c72 38%,
            #242064 70%,
            #071a39
        ) !important;

    background-size:
        150% 150%;
    animation:
        pgSetupLivingBackground 12s ease-in-out infinite alternate !important;
}

/* الرموز المتحركة تصبح أوضح */
html body #setup-screen
.floating-puzzle {
    opacity: 0.24 !important;
    color: #7ee6ff !important;
    font-size: 48px !important;

    filter:
        drop-shadow(0 0 10px rgba(79, 214, 255, 0.7))
        drop-shadow(0 7px 7px rgba(0, 0, 0, 0.22)) !important;

    animation:
        pgSetupSymbolDance 10s ease-in-out infinite !important;
}

html body #setup-screen
.floating-puzzle:nth-child(even) {
    font-size: 0 !important;
}

html body #setup-screen
.floating-puzzle:nth-child(even)::before {
    content: "⬡" !important;
    color: #5ff0b2 !important;
    font-size: 64px !important;

    filter:
        drop-shadow(0 0 13px rgba(44, 236, 153, 0.75)) !important;
}

html body #setup-screen
.floating-puzzle:nth-child(3n)::before {
    color: #ff5878 !important;

    filter:
        drop-shadow(0 0 13px rgba(255, 66, 104, 0.72)) !important;
}

html body #setup-screen
.floating-puzzle:nth-child(2) {
    animation-delay: -2s !important;
}

html body #setup-screen
.floating-puzzle:nth-child(3) {
    animation-delay: -5s !important;
}

html body #setup-screen
.floating-puzzle:nth-child(4) {
    animation-delay: -7s !important;
}

html body #setup-screen
.floating-puzzle:nth-child(5) {
    animation-delay: -3s !important;
}

html body #setup-screen
.floating-puzzle:nth-child(6) {
    animation-delay: -8s !important;
}

/* الحاوية الخارجية لاختيار نمط الجولات */
html body #setup-screen
.pg-round-mode-planner {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    margin-top: 20px;
    padding: 22px 23px 24px;

    border:
        1px solid rgba(112, 226, 255, 0.58) !important;
    border-radius: 27px !important;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255, 55, 96, 0.17),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 82%,
            rgba(35, 225, 146, 0.15),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(4, 40, 88, 0.96),
            rgba(22, 28, 82, 0.96)
        ) !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.3),
        0 0 28px rgba(55, 197, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

/* أشكال سداسية متحركة داخل خلفية القسم */
html body #setup-screen
.pg-round-mode-planner::before {
    content: "⬡";
    position: absolute;
    top: -35px;
    right: -22px;
    z-index: -1;

    color: rgba(45, 235, 151, 0.15);
    font-size: 190px;
    line-height: 1;

    filter:
        drop-shadow(0 0 18px rgba(38, 226, 147, 0.2));

    animation:
        pgRoundHexOrbit 8s ease-in-out infinite alternate;
}

html body #setup-screen
.pg-round-mode-planner::after {
    content: "🧩";
    position: absolute;
    bottom: -36px;
    left: -22px;
    z-index: -1;

    opacity: 0.12;
    font-size: 125px;

    filter:
        drop-shadow(0 0 15px rgba(255, 192, 58, 0.4));

    animation:
        pgRoundPuzzleOrbit 9s ease-in-out infinite alternate;
}

/* عنوان القسم */
html body #setup-screen
.pg-round-mode-planner-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;

    width: fit-content;
    margin: 0 auto 20px;
    padding: 10px 20px;

    border:
        1px solid rgba(255, 255, 255, 0.17);
    border-radius: 16px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(11, 120, 187, 0.74),
            rgba(77, 51, 164, 0.75)
        ) !important;

    box-shadow:
        0 9px 21px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html body #setup-screen
.pg-round-mode-planner-title > span:first-child {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;

    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            #54dfff,
            #7354e4
        );

    box-shadow:
        0 0 15px rgba(71, 211, 255, 0.3);

    font-size: 1.35rem;
    animation:
        pgRoundGameIcon 2.3s ease-in-out infinite;
}

html body #setup-screen
.pg-round-mode-planner-title strong {
    color: #ffffff !important;
    font-size: 1.08rem !important;
}

html body #setup-screen
.pg-round-mode-planner-title small {
    color: #bceeff !important;
}

/* زر شرح الشبكة */
html body #setup-screen
.pg-round-hex-guide-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;

    border:
        1px solid rgba(255, 232, 134, 0.85);
    border-radius: 12px;

    color: #172d5c;
    background:
        linear-gradient(
            145deg,
            #fff27f,
            #ffb82d
        );

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.24),
        0 0 13px rgba(255, 194, 47, 0.2);

    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;

    animation:
        pgRoundGuidePulse 2.5s ease-in-out infinite;
}

/* تحويل الجولات إلى بطاقات أفقية كبيرة */
html body #setup-screen
.pg-round-mode-list {
    position: relative;
    z-index: 2;

    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 15px !important;
}

/* بطاقة الجولة */
html body #setup-screen
.pg-round-mode-row {
    position: relative;
    overflow: hidden;

    display: flex !important;
    flex-direction: column;
    gap: 13px;

    min-height: 150px;
    padding: 17px 14px 15px !important;

    border:
        1px solid rgba(121, 216, 255, 0.32) !important;
    border-radius: 20px !important;

    background:
        linear-gradient(
            155deg,
            rgba(26, 81, 138, 0.76),
            rgba(31, 36, 97, 0.88)
        ) !important;

    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}

html body #setup-screen
.pg-round-mode-row::before {
    content: "";
    position: absolute;
    top: -45px;
    right: -45px;

    width: 100px;
    height: 100px;
    border-radius: 50%;

    background:
        rgba(66, 210, 255, 0.13);
    filter: blur(5px);

    transition:
        transform 0.35s ease;
}

html body #setup-screen
.pg-round-mode-row:hover {
    border-color:
        rgba(92, 224, 255, 0.72) !important;
    transform:
        translateY(-5px) !important;

    box-shadow:
        0 17px 30px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(61, 207, 255, 0.14) !important;
}

html body #setup-screen
.pg-round-mode-row:hover::before {
    transform:
        scale(1.45)
        translate(-10px, 10px);
}

/* رقم الجولة */
html body #setup-screen
.pg-round-mode-row > strong {
    position: relative;
    z-index: 2;

    width: fit-content;
    margin: 0 auto;
    padding: 7px 18px;

    border:
        1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #107bb9,
            #5244b8
        ) !important;

    box-shadow:
        0 6px 13px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    font-size: 0.92rem !important;
}

/* زرا البازل والشبكة */
html body #setup-screen
.pg-round-mode-buttons {
    position: relative;
    z-index: 2;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px !important;

    width: 100%;
}

html body #setup-screen
.pg-round-mode-button {
    position: relative;
    overflow: hidden;

    min-height: 60px;
    padding: 9px 7px !important;

    border:
        1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;

    font-size: 0.9rem !important;
    font-weight: 900 !important;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease !important;
}

/* البازل */
html body #setup-screen
.pg-round-mode-button[data-round-mode="puzzle"] {
    color: #fff2b4 !important;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 226, 91, 0.25),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #a84e32,
            #663779 65%,
            #3f306f
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* الشبكة */
html body #setup-screen
.pg-round-mode-button[data-round-mode="hex"] {
    color: #d1ffe8 !important;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(72, 255, 167, 0.25),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #0b9b6f,
            #126c7b 60%,
            #285183
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html body #setup-screen
.pg-round-mode-button:hover {
    transform:
        translateY(-3px)
        scale(1.025) !important;
    filter:
        brightness(1.13);
}

/* الاختيار الحالي */
html body #setup-screen
.pg-round-mode-button.selected {
    border-color:
        #ffe36f !important;

    transform:
        translateY(-3px)
        scale(1.035) !important;

    filter:
        brightness(1.18);

    box-shadow:
        0 9px 18px rgba(0, 0, 0, 0.28),
        0 0 0 2px rgba(255, 224, 95, 0.18),
        0 0 17px rgba(255, 211, 65, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

html body #setup-screen
.pg-round-mode-button.selected::after {
    content: "✓";
    position: absolute;
    top: 5px;
    left: 6px;

    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    border-radius: 50%;
    color: #14315c;
    background: #ffe374;

    box-shadow:
        0 0 10px rgba(255, 222, 92, 0.52);

    font-size: 0.72rem;
    font-weight: 900;

    animation:
        pgRoundSelectedCheck 1.7s ease-in-out infinite;
}

/* الحركات */
@keyframes pgSetupLivingBackground {
    0% {
        background-position:
            0% 0%;
    }

    50% {
        background-position:
            60% 40%;
    }

    100% {
        background-position:
            100% 85%;
    }
}

@keyframes pgSetupSymbolDance {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-10deg)
            scale(0.92);
    }

    35% {
        transform:
            translateY(-28px)
            rotate(8deg)
            scale(1.08);
    }

    70% {
        transform:
            translate(14px, -12px)
            rotate(-3deg)
            scale(1);
    }
}

@keyframes pgRoundHexOrbit {
    from {
        transform:
            translate(0, 0)
            rotate(-10deg)
            scale(0.9);
    }

    to {
        transform:
            translate(-28px, 25px)
            rotate(18deg)
            scale(1.12);
    }
}

@keyframes pgRoundPuzzleOrbit {
    from {
        transform:
            translate(0, 0)
            rotate(-12deg);
    }

    to {
        transform:
            translate(30px, -24px)
            rotate(15deg)
            scale(1.12);
    }
}

@keyframes pgRoundGameIcon {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(5deg);
    }
}

@keyframes pgRoundGuidePulse {
    0%,
    100% {
        box-shadow:
            0 7px 16px rgba(0, 0, 0, 0.24),
            0 0 0 0 rgba(255, 210, 65, 0.35);
    }

    50% {
        box-shadow:
            0 9px 20px rgba(0, 0, 0, 0.28),
            0 0 0 7px rgba(255, 210, 65, 0);
    }
}

@keyframes pgRoundSelectedCheck {
    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.16);
    }
}

/* الشاشات الصغيرة */
@media (max-width: 820px) {
    html body #setup-screen
    .pg-round-mode-planner-title {
        width: 100%;
        flex-wrap: wrap;
    }

    html body #setup-screen
    .pg-round-mode-list {
        grid-template-columns:
            1fr !important;
    }

    html body #setup-screen
    .pg-round-mode-row {
        min-height: 135px;
    }
}
/* ==================================================
   الفيديو الحقيقي لشرح لعبة الشبكة
================================================== */

/* إخفاء عناصر الشرح المتحرك القديم */
html body #pg-hex-tutorial
.pg-hex-tutorial-progress,
html body #pg-hex-tutorial
.pg-hex-tutorial-caption,
html body #pg-hex-tutorial
.pg-hex-tutorial-replay,
html body #pg-hex-tutorial
.pg-hex-tutorial-board,
html body #pg-hex-tutorial
.pg-hex-tutorial-question,
html body #pg-hex-tutorial
.pg-hex-tutorial-result,
html body #pg-hex-tutorial
.pg-hex-tutorial-win {
    display: none !important;
}

/* مساحة الفيديو */
html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-hex-tutorial
.pg-hex-tutorial-stage {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px !important;

    border:
        2px solid rgba(83, 218, 255, 0.72) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(4, 25, 62, 0.98),
            rgba(24, 20, 73, 0.98)
        ) !important;

    box-shadow:
        0 17px 38px rgba(0, 0, 0, 0.38),
        0 0 25px rgba(65, 206, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* الفيديو */
html body
#pg-hex-tutorial-video {
    display: block !important;

    width: 100% !important;
    max-height: min(62vh, 570px) !important;
    aspect-ratio: 16 / 9;

    border: none;
    border-radius: 16px;

    background: #020817;
    object-fit: contain;

    box-shadow:
        0 10px 27px rgba(0, 0, 0, 0.42);
}

/* جعل نافذة الفيديو مناسبة وأكبر */
html body
#pg-mode-info-overlay.pg-mode-info-hex
.pg-mode-info-box {
    width: min(960px, 96vw) !important;
    min-height: 0 !important;
    max-height: 96vh;
    padding: 20px 23px 22px !important;
}

/* عنوان شرح الشبكة */
html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-mode-info-title {
    margin-bottom: 5px !important;
}

/* الجملة أسفل العنوان */
html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-mode-info-text {
    margin-bottom: 12px !important;
}
/* إخفاء جملة شاهد الفكرة في شرح الشبكة فقط */
html body
#pg-mode-info-overlay.pg-mode-info-hex
#pg-mode-info-text {
    display: none !important;
}
/* ==================================================
   عرض جميع بطاقات الجولات على سطر واحد
================================================== */

html body #setup-screen
.pg-round-mode-list {
    display: grid !important;
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

html body #setup-screen
.pg-round-mode-row {
    min-width: 0 !important;
    min-height: 145px !important;
    padding: 14px 9px 12px !important;
}

html body #setup-screen
.pg-round-mode-row > strong {
    padding: 6px 13px !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
}

html body #setup-screen
.pg-round-mode-buttons {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

html body #setup-screen
.pg-round-mode-button {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 8px 3px !important;
    font-size: 0.78rem !important;
}

/* إبقاؤها على سطر واحد في شاشة الكمبيوتر */
@media (min-width: 821px) {
    html body #setup-screen
    .pg-round-mode-list {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
    }
}

/* في الهاتف فقط تصبح تحت بعضها */
@media (max-width: 820px) {
    html body #setup-screen
    .pg-round-mode-list {
        grid-template-columns:
            1fr !important;
    }
}
/* مكان زر شرح لعبة الشبكة */
html body #setup-screen
.pg-round-hex-guide-button {
    position: relative !important;
    transform: translateX(-270px) !important;
}
/* ==================================================
   عنوان اختيار الجولات وزر شرح لعبة الشبكة
================================================== */

/* إبقاء العنوان في منتصف الصندوق تمامًا */
html body #setup-screen
.pg-round-mode-planner-title {
    position: relative !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 11px !important;

    width: 100% !important;
    min-height: 68px;
    margin:
        0 auto 20px !important;
    padding:
        10px 210px 10px 20px !important;

    transform: none !important;
}

/* توسيط النص */
html body #setup-screen
.pg-round-mode-planner-title > div {
    text-align: center !important;
}

html body #setup-screen
.pg-round-mode-planner-title strong {
    display: block;
    text-align: center !important;
}

/* زر شرح لعبة الشبكة */
html body #setup-screen
.pg-round-hex-guide-button {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    left: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    min-width: 184px;
    min-height: 48px;
    padding:
        8px 13px !important;

    border:
        1px solid rgba(117, 255, 202, 0.8) !important;
    border-radius:
        15px !important;

    color:
        #ffffff !important;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(100, 255, 210, 0.28),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #08a974,
            #087d86 55%,
            #155ca3
        ) !important;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.3),
        0 0 17px rgba(36, 226, 159, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    font-family:
        inherit !important;
    font-size:
        0.82rem !important;
    font-weight:
        900 !important;

    cursor:
        pointer;

    transform:
        translateY(-50%) !important;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease !important;

    animation:
        pgHexGuideButtonGlow
        2.7s ease-in-out infinite !important;
}

html body #setup-screen
.pg-round-hex-guide-button:hover {
    filter:
        brightness(1.13);

    transform:
        translateY(-54%)
        scale(1.035) !important;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.34),
        0 0 25px rgba(48, 237, 170, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* اسم الزر */
html body #setup-screen
.pg-round-hex-guide-button > strong {
    color:
        #ffffff !important;

    font-size:
        0.82rem !important;
    white-space:
        nowrap;
}

/* شعار الشبكة المصغّر */
html body #setup-screen
.pg-hex-guide-logo {
    position: relative;

    display: block;
    flex-shrink: 0;

    width: 39px;
    height: 34px;
}

html body #setup-screen
.pg-hex-guide-logo i {
    position: absolute;

    display: block;

    width: 19px;
    height: 17px;

    clip-path:
        polygon(
            25% 0,
            75% 0,
            100% 50%,
            75% 100%,
            25% 100%,
            0 50%
        );

    box-shadow:
        0 0 9px rgba(255, 255, 255, 0.3);
}

html body #setup-screen
.pg-hex-guide-logo i:nth-child(1) {
    top: 0;
    right: 1px;

    background:
        linear-gradient(
            145deg,
            #ff5d78,
            #bd123c
        );
}

html body #setup-screen
.pg-hex-guide-logo i:nth-child(2) {
    top: 15px;
    right: 10px;

    background:
        linear-gradient(
            145deg,
            #67f0af,
            #08a968
        );
}

html body #setup-screen
.pg-hex-guide-logo i:nth-child(3) {
    top: 0;
    right: 19px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #8edfff
        );
}

/* دائرة التشغيل */
html body #setup-screen
.pg-hex-guide-play {
    display: grid !important;
    place-items: center;

    flex-shrink: 0;

    width: 27px;
    height: 27px;
    padding-right: 2px;

    border:
        1px solid rgba(255, 255, 255, 0.55);
    border-radius:
        50%;

    color:
        #163769;

    background:
        linear-gradient(
            145deg,
            #fff48b,
            #ffc438
        );

    box-shadow:
        0 0 11px rgba(255, 211, 64, 0.35);

    font-size:
        0.7rem;

    animation:
        pgHexGuidePlayPulse
        1.8s ease-in-out infinite;
}

@keyframes pgHexGuideButtonGlow {
    0%,
    100% {
        box-shadow:
            0 9px 20px rgba(0, 0, 0, 0.3),
            0 0 12px rgba(36, 226, 159, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    50% {
        box-shadow:
            0 11px 24px rgba(0, 0, 0, 0.32),
            0 0 23px rgba(36, 226, 159, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.27);
    }
}

@keyframes pgHexGuidePlayPulse {
    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.12);
    }
}

/* الشاشات الصغيرة */
@media (max-width: 760px) {
    html body #setup-screen
    .pg-round-mode-planner-title {
        padding:
            10px !important;
        padding-bottom:
            72px !important;
    }

    html body #setup-screen
    .pg-round-hex-guide-button {
        top:
            auto !important;
        bottom:
            8px !important;
        left:
            50% !important;

        transform:
            translateX(-50%) !important;
    }
}
/* ==================================================
   زر شرح لعبة البازل — يمين عنوان الجولات
================================================== */

html body #setup-screen
.pg-round-puzzle-guide-button {
    position:
        absolute !important;
    top:
        50% !important;
    right:
        14px !important;
    left:
        auto !important;

    display:
        flex !important;
    align-items:
        center !important;
    justify-content:
        center !important;
    gap:
        9px !important;

    min-width:
        184px;
    min-height:
        48px;
    padding:
        8px 13px !important;

    border:
        1px solid rgba(255, 221, 112, 0.88) !important;
    border-radius:
        15px !important;

    color:
        #ffffff !important;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(255, 225, 103, 0.3),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #c15a34,
            #8c4177 52%,
            #5941a3
        ) !important;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.3),
        0 0 17px rgba(255, 184, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;

    font-family:
        inherit !important;
    font-size:
        0.82rem !important;
    font-weight:
        900 !important;

    cursor:
        pointer;

    transform:
        translateY(-50%) !important;

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease !important;

    animation:
        pgPuzzleGuideButtonGlow
        2.7s ease-in-out infinite !important;
}

html body #setup-screen
.pg-round-puzzle-guide-button:hover {
    filter:
        brightness(1.13);

    transform:
        translateY(-54%)
        scale(1.035) !important;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.34),
        0 0 25px rgba(255, 193, 62, 0.33),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* اسم الزر */
html body #setup-screen
.pg-round-puzzle-guide-button > strong {
    color:
        #ffffff !important;

    font-size:
        0.82rem !important;
    white-space:
        nowrap;
}

/* شعار البازل */
html body #setup-screen
.pg-puzzle-guide-logo {
    display:
        grid !important;
    place-items:
        center;

    flex-shrink:
        0;

    width:
        39px;
    height:
        34px;

    border:
        1px solid rgba(255, 244, 174, 0.55);
    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #ffe66e,
            #ff9e32
        );

    box-shadow:
        0 0 13px rgba(255, 193, 55, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    font-size:
        1.55rem;

    animation:
        pgPuzzleGuideLogoMove
        2.2s ease-in-out infinite;
}

/* دائرة التشغيل */
html body #setup-screen
.pg-puzzle-guide-play {
    display:
        grid !important;
    place-items:
        center;

    flex-shrink:
        0;

    width:
        27px;
    height:
        27px;
    padding-right:
        2px;

    border:
        1px solid rgba(255, 255, 255, 0.55);
    border-radius:
        50%;

    color:
        #173769;

    background:
        linear-gradient(
            145deg,
            #91edff,
            #54baff
        );

    box-shadow:
        0 0 11px rgba(83, 196, 255, 0.36);

    font-size:
        0.7rem;

    animation:
        pgPuzzleGuidePlayPulse
        1.8s ease-in-out infinite;
}

@keyframes pgPuzzleGuideButtonGlow {
    0%,
    100% {
        box-shadow:
            0 9px 20px rgba(0, 0, 0, 0.3),
            0 0 12px rgba(255, 184, 55, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    50% {
        box-shadow:
            0 11px 24px rgba(0, 0, 0, 0.32),
            0 0 23px rgba(255, 184, 55, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.27);
    }
}

@keyframes pgPuzzleGuideLogoMove {
    0%,
    100% {
        transform:
            rotate(-5deg)
            scale(1);
    }

    50% {
        transform:
            rotate(6deg)
            scale(1.09);
    }
}

@keyframes pgPuzzleGuidePlayPulse {
    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.12);
    }
}

/* ترتيب الزرين في شاشة الهاتف */
@media (max-width: 760px) {
    html body #setup-screen
    .pg-round-mode-planner-title {
        padding-bottom:
            125px !important;
    }

    html body #setup-screen
    .pg-round-puzzle-guide-button {
        top:
            auto !important;
        right:
            50% !important;
        bottom:
            65px !important;

        transform:
            translateX(50%) !important;
    }
}
/* تثبيت عبارة اختر نمط كل جولة في المنتصف تمامًا */
html body #setup-screen
.pg-round-mode-planner-title > div {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    width: max-content;
    max-width: 240px;

    text-align: center !important;

    transform:
        translate(-50%, -50%) !important;
}

/* وضع أيقونة التحكم بجانب العبارة دون دفعها */
html body #setup-screen
.pg-round-mode-planner-title
> span:first-child {
    position: absolute !important;
    top: 50% !important;
    left: calc(50% + 112px) !important;
    right: auto !important;

    transform:
        translateY(-50%) !important;
}

/* منع أي حركة سابقة من تغيير مركز الأيقونة */
html body #setup-screen
.pg-round-mode-planner-title
> span:first-child {
    animation:
        pgRoundCenteredGameIcon
        2.3s ease-in-out infinite !important;
}

@keyframes pgRoundCenteredGameIcon {
    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(calc(-50% - 4px))
            rotate(5deg);
    }
}
/* تحريك عبارة اختر نمط كل جولة يدويًا */
html body #setup-screen
.pg-round-mode-planner-title > div {
    left: calc(50% + 0px) !important;
}
/* تحريك عنوان نمط الجولات والأيقونة معًا */
html body #setup-screen
.pg-round-mode-planner-title {
    --pg-round-title-move: -20px;
}

html body #setup-screen
.pg-round-mode-planner-title > div {
    left:
        calc(
            50% + var(--pg-round-title-move)
        ) !important;
}

html body #setup-screen
.pg-round-mode-planner-title
> span:first-child {
    left:
        calc(
            50% + 75px +
            var(--pg-round-title-move)
        ) !important;
}
/* إصلاح إخفاء الجولات الزائدة حسب عدد الجولات المختار */
html body #setup-screen
.pg-round-mode-row.pg-round-mode-hidden {
    display: none !important;
}
/* ==================================================
   توزيع بطاقات الجولات حسب العدد المختار
================================================== */

/* خمس جولات: خمس بطاقات موزعة بالتساوي */
html body #setup-screen
.pg-round-mode-list {
    width: 100% !important;
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
    justify-content: center !important;
}

/* ثلاث جولات: ثلاث بطاقات موزعة على كامل المساحة */
html body #setup-screen
.pg-round-mode-list:has(
    .pg-round-mode-row[data-round-number="4"]
    .pg-round-mode-hidden
) {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
}

/* تصحيح المحدد الخاص بثلاث جولات */
html body #setup-screen
.pg-round-mode-list:has(
    .pg-round-mode-row[data-round-number="4"].pg-round-mode-hidden
) {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
}

/* جولة واحدة: بطاقة واحدة في المنتصف */
html body #setup-screen
.pg-round-mode-list:has(
    .pg-round-mode-row[data-round-number="2"].pg-round-mode-hidden
) {
    grid-template-columns:
        minmax(180px, 240px) !important;
    justify-content:
        center !important;
}

/* ضمان اختفاء الجولات الزائدة */
html body #setup-screen
.pg-round-mode-row.pg-round-mode-hidden {
    display: none !important;
}
/* توسيط كل بطاقة داخل عمودها لتتساوى المسافات الجانبية */
html body #setup-screen
.pg-round-mode-list
.pg-round-mode-row {
    width: min(100%, 180px) !important;
    justify-self: center !important;
    margin-inline: auto !important;
}

/* ثلاث جولات: توزيع متوازن من الحافتين */
html body #setup-screen
.pg-round-mode-list:has(
    .pg-round-mode-row[data-round-number="4"].pg-round-mode-hidden
) {
    padding-inline: 20px !important;
}

/* خمس جولات: توزيع متوازن من الحافتين */
html body #setup-screen
.pg-round-mode-list:not(:has(
    .pg-round-mode-row[data-round-number="4"].pg-round-mode-hidden
)) {
    padding-inline: 5px !important;
}
/* ==================================================
   خيار الأوامر الصوتية في إعداد المباراة
================================================== */

html body #setup-screen
.pg-voice-setup-option {
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    width: min(610px, 100%);
    min-height: 72px;
    margin: 17px auto 5px;
    padding: 11px 15px;

    border:
        1px solid rgba(93, 225, 255, 0.46);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(78, 224, 255, 0.2),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            rgba(7, 59, 111, 0.9),
            rgba(39, 31, 101, 0.91)
        );

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);

    cursor: pointer;
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

html body #setup-screen
.pg-voice-setup-option:hover {
    border-color:
        rgba(108, 238, 255, 0.82);

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 27px rgba(0, 0, 0, 0.27),
        0 0 18px rgba(61, 214, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* مربع التفعيل */
html body #setup-screen
#pgVoiceCommandsCheckbox {
    position: relative;

    flex-shrink: 0;

    appearance: none;
    width: 49px;
    height: 27px;
    margin: 0;

    border:
        1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;

    background:
        rgba(4, 27, 65, 0.85);

    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

html body #setup-screen
#pgVoiceCommandsCheckbox::before {
    content: "";

    position: absolute;
    top: 3px;
    right: 3px;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #b9d9ed
        );

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.32);

    transition:
        right 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

html body #setup-screen
#pgVoiceCommandsCheckbox:checked {
    border-color:
        #66f0b3;

    background:
        linear-gradient(
            135deg,
            #08b779,
            #167bd0
        );

    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.18),
        0 0 13px rgba(44, 229, 151, 0.25);
}

html body #setup-screen
#pgVoiceCommandsCheckbox:checked::before {
    right: 25px;

    background:
        linear-gradient(
            145deg,
            #fff58f,
            #ffc73e
        );
}

/* النص */
html body #setup-screen
.pg-voice-setup-option label {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;

    color: #ffffff;
    cursor: pointer;
}

html body #setup-screen
.pg-voice-setup-option label > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

html body #setup-screen
.pg-voice-setup-option strong {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 900;
}

html body #setup-screen
.pg-voice-setup-option small {
    color: #bdeeff;
    font-size: 0.76rem;
}

/* أيقونة الميكروفون */
html body #setup-screen
.pg-voice-setup-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    flex-shrink: 0;

    border:
        1px solid rgba(255, 255, 255, 0.3);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #177fcb,
            #6b42cb
        );

    box-shadow:
        0 6px 13px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    font-size: 1.35rem;
}

html body #setup-screen
#pgVoiceCommandsCheckbox:checked
+ label
.pg-voice-setup-icon {
    animation:
        pgVoiceSetupMicPulse
        1.5s ease-in-out infinite;
}

/* حالة الدعم */
html body #setup-screen
.pg-voice-setup-support {
    flex-shrink: 0;
    padding: 6px 10px;

    border:
        1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50px;

    color: #c9efff;
    background:
        rgba(255, 255, 255, 0.075);

    font-size: 0.68rem;
    font-weight: 800;
}

@keyframes pgVoiceSetupMicPulse {
    0%,
    100% {
        transform:
            scale(1);
        box-shadow:
            0 6px 13px rgba(0, 0, 0, 0.22),
            0 0 0 0 rgba(74, 226, 255, 0.32);
    }

    50% {
        transform:
            scale(1.07);
        box-shadow:
            0 8px 17px rgba(0, 0, 0, 0.25),
            0 0 0 7px rgba(74, 226, 255, 0);
    }
}

@media (max-width: 600px) {
    html body #setup-screen
    .pg-voice-setup-option {
        flex-wrap: wrap;
    }

    html body #setup-screen
    .pg-voice-setup-support {
        margin-inline-start: 62px;
    }
}
/* ==========================================
   توحيد اتجاه مفتاح الموسيقى والأوامر الصوتية
========================================== */

#setup-screen #bgMusicCheckbox::before,
#setup-screen #pgVoiceCommandsCheckbox::before {
    left: 3px !important;
    right: auto !important;
    transform: translateX(0) !important;
}

#setup-screen #bgMusicCheckbox:checked::before,
#setup-screen #pgVoiceCommandsCheckbox:checked::before {
    left: 3px !important;
    right: auto !important;
    transform: translateX(25px) !important;
}
/* ==========================================
   توسيط رسالة التنبيه الخاصة بأسماء الفرق
========================================== */

html body #puzzgo-message-overlay {
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}

html body #puzzgo-message-overlay
#puzzgo-message-box {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto !important;
    transform: none !important;
}

html body #puzzgo-message-overlay.hidden {
    display: none !important;
}
/* ==========================================
   مؤثرات احترافية شاملة لصفحة إعداد المباراة
========================================== */

#setup-screen {
    position: relative !important;
    isolation: isolate;
    overflow-x: hidden !important;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 226, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 28%,
            rgba(142, 69, 255, 0.19),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 88%,
            rgba(255, 55, 130, 0.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #06162f 0%,
            #092b58 42%,
            #17194d 72%,
            #281451 100%
        ) !important;
    background-size:
        140% 140%,
        150% 150%,
        150% 150%,
        100% 100% !important;
    animation:
        pgSetupBackgroundMove 14s ease-in-out infinite alternate !important;
}

/* هالات ضوئية متحركة في الخلفية */
#setup-screen::after {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(
            circle,
            rgba(66, 226, 255, 0.18) 0 2px,
            transparent 3px
        )
        0 0 / 75px 75px,
        radial-gradient(
            circle,
            rgba(255, 216, 73, 0.15) 0 2px,
            transparent 3px
        )
        35px 25px / 105px 105px;
    animation:
        pgSetupParticlesMove 22s linear infinite;
}

#setup-screen > * {
    position: relative;
    z-index: 1;
}

/* لمعان متحرك على الصندوق الأساسي */
#setup-screen .setup-panel,
#setup-screen .setup-shell {
    position: relative !important;
    border-color: rgba(82, 211, 255, 0.55) !important;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        0 0 35px rgba(43, 181, 255, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    animation:
        pgSetupPanelGlow 4.5s ease-in-out infinite !important;
}

/* حركة جميلة للعنوان */
#setup-screen .setup-title,
#setup-screen .setup-section-title h3 {
    color: #ffffff !important;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.18),
        0 0 13px rgba(82, 211, 255, 0.48),
        0 0 28px rgba(117, 92, 255, 0.26) !important;
}

#setup-screen .setup-title {
    animation:
        pgSetupTitleFloat 3.2s ease-in-out infinite !important;
}

/* خطوط العناوين تتنفس بالضوء */
#setup-screen .setup-section-title > span {
    background:
        linear-gradient(
            90deg,
            transparent,
            #40d9ff,
            #8c63ff,
            #ffcf48,
            transparent
        ) !important;
    background-size: 220% 100% !important;
    box-shadow:
        0 0 13px rgba(80, 207, 255, 0.42) !important;
    animation:
        pgSetupLineFlow 3.4s linear infinite !important;
}

/* بطاقات أسماء الفرق */
#setup-screen .team-input-group {
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

#setup-screen .team-input-group::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -80%;
    width: 45%;
    height: 220%;
    pointer-events: none;
    opacity: 0;
    transform: rotate(22deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent
        );
    transition:
        left 0.65s ease,
        opacity 0.25s ease;
}

#setup-screen .team-input-group:hover {
    transform: translateY(-5px) scale(1.012) !important;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(71, 211, 255, 0.2) !important;
}

#setup-screen .team-input-group:hover::after {
    left: 135%;
    opacity: 1;
}

#setup-screen .team-input-group input {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

#setup-screen .team-input-group input:focus {
    transform: scale(1.018);
    box-shadow:
        0 0 0 3px rgba(93, 222, 255, 0.2),
        0 0 22px rgba(82, 211, 255, 0.3) !important;
}

/* شارة المواجهة */
#setup-screen .versus-badge {
    animation:
        pgSetupVsPulse 2.1s ease-in-out infinite !important;
}

/* بطاقتا البازل والشبكة */
#setup-screen .pg-game-mode-card {
    overflow: hidden !important;
    transition:
        transform 0.32s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.32s ease,
        border-color 0.32s ease !important;
}

#setup-screen .pg-game-mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.22) 45%,
            transparent 70%
        );
    transform: translateX(-110%);
    transition:
        transform 0.75s ease,
        opacity 0.25s ease;
}

#setup-screen .pg-game-mode-card:hover {
    transform: translateY(-7px) scale(1.018) !important;
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(67, 211, 255, 0.25) !important;
}

#setup-screen .pg-game-mode-card:hover::before {
    opacity: 1;
    transform: translateX(110%);
}

#setup-screen .pg-game-mode-card:has(input:checked) {
    animation:
        pgSetupSelectedGlow 2.4s ease-in-out infinite !important;
}

/* حركة أيقونتي البازل والشبكة */
#setup-screen .pg-game-mode-icon {
    filter:
        drop-shadow(0 7px 8px rgba(0, 0, 0, 0.3))
        drop-shadow(0 0 9px rgba(92, 218, 255, 0.35));
    animation:
        pgSetupIconFloat 2.8s ease-in-out infinite !important;
}

/* بطاقات عدد الجولات */
#setup-screen .round-option {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease !important;
}

#setup-screen .round-option:hover:not(:disabled) {
    transform: translateY(-5px) scale(1.025) !important;
    filter: brightness(1.12);
    box-shadow:
        0 16px 27px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(75, 208, 255, 0.28) !important;
}

#setup-screen .round-option:has(input:checked) {
    animation:
        pgSetupSelectedGlow 2.4s ease-in-out infinite !important;
}

/* مخطط أنماط الجولات */
#setup-screen .pg-round-mode-planner {
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 28px rgba(54, 193, 255, 0.12) !important;
    animation:
        pgSetupPlannerGlow 5s ease-in-out infinite !important;
}

#setup-screen .pg-round-mode-row {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

#setup-screen .pg-round-mode-row:hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 15px 28px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(76, 205, 255, 0.18) !important;
}

/* أزرار بازل وشبكة لكل جولة */
#setup-screen .pg-round-mode-button {
    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease !important;
}

#setup-screen .pg-round-mode-button:hover {
    transform: translateY(-3px) scale(1.04) !important;
    filter: brightness(1.15) saturate(1.08);
}

#setup-screen .pg-round-mode-button.selected {
    animation:
        pgSetupButtonPulse 2s ease-in-out infinite !important;
}

/* بطاقات الفئات */
#setup-screen .category-card {
    transition:
        transform 0.3s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.3s ease,
        filter 0.3s ease !important;
}

#setup-screen .category-card:hover {
    transform:
        translateY(-7px)
        rotateX(2deg)
        scale(1.025) !important;
    filter: brightness(1.1) saturate(1.08);
    box-shadow:
        0 20px 35px rgba(0, 0, 0, 0.3),
        0 0 26px rgba(69, 209, 255, 0.22) !important;
}

#setup-screen .category-card:has(input:checked) {
    animation:
        pgSetupCategorySelected 2.3s ease-in-out infinite !important;
}

#setup-screen .category-icon {
    animation:
        pgSetupIconFloat 3s ease-in-out infinite !important;
}

/* خيارات الموسيقى والصوت */
#setup-screen div:has(> #bgMusicCheckbox),
#setup-screen .pg-voice-setup-option {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease !important;
}

#setup-screen div:has(> #bgMusicCheckbox):hover,
#setup-screen .pg-voice-setup-option:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(65, 211, 255, 0.2) !important;
}

/* زر بدء المباراة */
#setup-screen #startGameBtn,
#setup-screen .setup-start-btn {
    transition:
        transform 0.28s ease,
        filter 0.28s ease,
        box-shadow 0.28s ease !important;
    animation:
        pgSetupStartButton 2.5s ease-in-out infinite !important;
}

#setup-screen #startGameBtn:hover:not(:disabled),
#setup-screen .setup-start-btn:hover:not(:disabled) {
    transform: translateY(-6px) scale(1.035) !important;
    filter: brightness(1.15) saturate(1.12);
    box-shadow:
        0 20px 38px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(255, 204, 62, 0.42) !important;
}

/* الحركات */
@keyframes pgSetupBackgroundMove {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            center;
    }

    100% {
        background-position:
            18% 15%,
            78% 20%,
            60% 82%,
            center;
    }
}

@keyframes pgSetupParticlesMove {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform:
            translate3d(75px, -65px, 0)
            rotate(4deg);
    }
}

@keyframes pgSetupPanelGlow {
    0%,
    100% {
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.38),
            0 0 25px rgba(43, 181, 255, 0.11),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    50% {
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.38),
            0 0 43px rgba(112, 76, 255, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

@keyframes pgSetupTitleFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes pgSetupLineFlow {
    to {
        background-position: 220% 0;
    }
}

@keyframes pgSetupVsPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 207, 72, 0.32);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 0 0 11px rgba(255, 207, 72, 0);
    }
}

@keyframes pgSetupSelectedGlow {
    0%,
    100% {
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.27),
            0 0 15px rgba(67, 213, 255, 0.25);
    }

    50% {
        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.3),
            0 0 31px rgba(116, 86, 255, 0.44);
    }
}

@keyframes pgSetupIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-6px) rotate(2deg);
    }
}

@keyframes pgSetupPlannerGlow {
    0%,
    100% {
        border-color:
            rgba(64, 203, 255, 0.48);
    }

    50% {
        border-color:
            rgba(159, 101, 255, 0.72);
    }
}

@keyframes pgSetupButtonPulse {
    0%,
    100% {
        box-shadow:
            0 8px 17px rgba(0, 0, 0, 0.24);
    }

    50% {
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.28),
            0 0 22px rgba(255, 217, 76, 0.35);
    }
}

@keyframes pgSetupCategorySelected {
    0%,
    100% {
        box-shadow:
            0 13px 25px rgba(0, 0, 0, 0.27),
            0 0 13px rgba(55, 213, 255, 0.22);
    }

    50% {
        box-shadow:
            0 16px 31px rgba(0, 0, 0, 0.3),
            0 0 29px rgba(255, 206, 66, 0.36);
    }
}

@keyframes pgSetupStartButton {
    0%,
    100% {
        box-shadow:
            0 12px 24px rgba(0, 0, 0, 0.3),
            0 0 17px rgba(255, 206, 62, 0.25);
    }

    50% {
        box-shadow:
            0 16px 31px rgba(0, 0, 0, 0.34),
            0 0 35px rgba(255, 206, 62, 0.48);
    }
}

/* إيقاف الحركات لمن يفعّل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    #setup-screen,
    #setup-screen::after,
    #setup-screen *,
    #setup-screen *::before,
    #setup-screen *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
/* ==========================================
   تفعيل مؤثرات إعداد المباراة بأولوية نهائية
========================================== */

html body #setup-screen#setup-screen {
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 229, 255, 0.24),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(155, 74, 255, 0.26),
            transparent 32%
        ),
        radial-gradient(
            circle at 52% 86%,
            rgba(255, 49, 131, 0.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #04142e,
            #073d72 40%,
            #242064 72%,
            #160d43
        ) !important;

    background-size:
        145% 145%,
        150% 150%,
        150% 150%,
        100% 100% !important;

    animation:
        pgSetupBackgroundMove
        14s ease-in-out infinite alternate
        !important;
}

html body #setup-screen#setup-screen::after {
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
    animation:
        pgSetupParticlesMove
        22s linear infinite
        !important;
}

/* الصندوق الأساسي */
html body #setup-screen#setup-screen
.setup-panel,
html body #setup-screen#setup-screen
.setup-shell {
    animation:
        pgSetupPanelGlow
        4.5s ease-in-out infinite
        !important;

    border-color:
        rgba(74, 215, 255, 0.68)
        !important;

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.42),
        0 0 40px rgba(54, 196, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18)
        !important;
}

/* العنوان */
html body #setup-screen#setup-screen
.setup-title {
    animation:
        pgSetupTitleFloat
        3.2s ease-in-out infinite
        !important;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 15px rgba(70, 218, 255, 0.7),
        0 0 35px rgba(139, 91, 255, 0.42)
        !important;
}

/* بطاقات الفرق وأنماط اللعب والجولات والفئات */
html body #setup-screen#setup-screen
.team-input-group,
html body #setup-screen#setup-screen
.pg-game-mode-card,
html body #setup-screen#setup-screen
.round-option,
html body #setup-screen#setup-screen
.pg-round-mode-row,
html body #setup-screen#setup-screen
.category-card {
    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        box-shadow 0.3s ease
        !important;
}

html body #setup-screen#setup-screen
.team-input-group:hover,
html body #setup-screen#setup-screen
.pg-game-mode-card:hover,
html body #setup-screen#setup-screen
.round-option:hover:not(:disabled),
html body #setup-screen#setup-screen
.pg-round-mode-row:hover,
html body #setup-screen#setup-screen
.category-card:hover {
    transform:
        translateY(-7px)
        scale(1.025)
        !important;

    filter:
        brightness(1.12)
        saturate(1.1)
        !important;

    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.34),
        0 0 30px rgba(67, 211, 255, 0.3)
        !important;
}

/* العناصر المختارة */
html body #setup-screen#setup-screen
.pg-game-mode-card:has(input:checked),
html body #setup-screen#setup-screen
.round-option:has(input:checked),
html body #setup-screen#setup-screen
.category-card:has(input:checked),
html body #setup-screen#setup-screen
.pg-round-mode-button.selected {
    animation:
        pgSetupSelectedGlow
        2.4s ease-in-out infinite
        !important;
}

/* الأيقونات */
html body #setup-screen#setup-screen
.pg-game-mode-icon,
html body #setup-screen#setup-screen
.category-icon {
    animation:
        pgSetupIconFloat
        2.8s ease-in-out infinite
        !important;

    filter:
        drop-shadow(
            0 7px 8px rgba(0, 0, 0, 0.3)
        )
        drop-shadow(
            0 0 11px rgba(83, 220, 255, 0.48)
        )
        !important;
}

/* شارة VS */
html body #setup-screen#setup-screen
.versus-badge {
    animation:
        pgSetupVsPulse
        2.1s ease-in-out infinite
        !important;
}

/* زر بدء المباراة */
html body #setup-screen#setup-screen
#startGameBtn {
    animation:
        pgSetupStartButton
        2.5s ease-in-out infinite
        !important;
}

html body #setup-screen#setup-screen
#startGameBtn:hover:not(:disabled) {
    transform:
        translateY(-6px)
        scale(1.04)
        !important;

    filter:
        brightness(1.16)
        saturate(1.14)
        !important;
}

/* إظهار أسماء الفرق بوضوح أثناء الكتابة */
html body #setup-screen#setup-screen
.team-input-group input,
html body #setup-screen#setup-screen
.team-input-group input:focus,
html body #setup-screen#setup-screen
#teamOneInput,
html body #setup-screen#setup-screen
#teamTwoInput {
    color: #102653 !important;
    -webkit-text-fill-color: #102653 !important;
    caret-color: #1677ff !important;
    background-color: #f7fcff !important;
    opacity: 1 !important;
}

html body #setup-screen#setup-screen
.team-input-group input::selection {
    color: #ffffff !important;
    background: #286cff !important;
}
/* إخفاء زر الميكروفون وواجهة الأوامر الصوتية */
button[id*="voice" i],
button[class*="voice" i],
button[id*="microphone" i],
button[class*="microphone" i],
button[id*="mic-" i],
button[class*="mic-" i],
.voice-control,
.voice-controls,
.voice-status,
#voiceControl,
#voiceControls,
#voiceStatus,
#voiceCommandButton,
#microphoneButton,
#micButton {
    display: none !important;
}
/* إخفاء خيار الميكروفون في أي مكان */
#voiceCheckbox,
label:has(#voiceCheckbox),
div:has(> #voiceCheckbox),
.voice-checkbox,
.voice-toggle,
.voice-option {
    display: none !important;
}
/* إخفاء خيار الأوامر الصوتية دون إخفاء اللعبة */
#pgVoiceCommandsCheckbox,
label:has(> #pgVoiceCommandsCheckbox),
#pgVoiceSetupSupport {
    display: none !important;
}
/* إخفاء خيار الميكروفون كاملًا */
.pg-voice-setup-option {
    display: none !important;
}
/* إعادة امتلاء بطاقة الشراء بالأزرق عند Hover */
.pg-account-panel[data-pg-panel="store"]
.pg-package-card {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover {
    background:
        linear-gradient(
            135deg,
            #0867ce,
            #139ee8
        ) !important;

    border-color:
        #7cddff !important;

    box-shadow:
        0 18px 38px rgba(0, 90, 190, 0.38),
        0 0 24px rgba(57, 197, 255, 0.34)
        !important;

    transform:
        translateY(-6px)
        scale(1.015) !important;
}

/* جعل جميع نصوص البطاقة واضحة فوق الأزرق */
.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover h4,

.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover p,

.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover span,

.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover strong,

.pg-account-panel[data-pg-panel="store"]
.pg-package-card:hover small {
    color: #ffffff !important;
}
/* بطاقة الهدية في الصفحة الرئيسية */
#start-screen .pg-welcome-gift-button {
    position: absolute;
    left: 50%;
    bottom: 118px;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: min(390px, 82%);
    min-height: 68px;
    padding: 10px 18px;

    border:
        2px solid rgba(255, 208, 61, 0.95);
    border-radius: 20px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(7, 75, 173, 0.96),
            rgba(15, 162, 216, 0.96)
        );

    box-shadow:
        0 9px 0 #063f89,
        0 16px 30px rgba(0, 48, 120, 0.32),
        0 0 24px rgba(255, 208, 61, 0.25);

    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

#start-screen
.pg-welcome-gift-button
.pg-welcome-gift-icon {
    font-size: 34px;
    animation:
        pgWelcomeGiftBounce
        1.8s ease-in-out infinite;
}

#start-screen
.pg-welcome-gift-button strong {
    display: block;
    font-size: 18px;
    color: #ffffff;
}

#start-screen
.pg-welcome-gift-button small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #eafaff;
}

#start-screen
.pg-welcome-gift-button:hover {
    transform:
        translateX(-50%)
        translateY(-5px)
        scale(1.025);

    filter:
        brightness(1.12)
        saturate(1.1);

    box-shadow:
        0 11px 0 #063f89,
        0 21px 36px rgba(0, 48, 120, 0.4),
        0 0 30px rgba(255, 211, 61, 0.4);
}

#start-screen
.pg-welcome-gift-button {
    transform: translateX(-50%);
}

@keyframes pgWelcomeGiftBounce {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(4deg);
    }
}
/* تصغير بطاقة الهدية ووضعها أعلى اليسار */
#start-screen
.pg-welcome-gift-button {
    top: 18px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;

    width: 225px !important;
    min-height: 54px !important;

    padding:
        7px 11px !important;

    gap: 8px !important;

    border-radius:
        16px !important;

    transform:
        none !important;

    box-shadow:
        0 6px 0 #063f89,
        0 11px 22px rgba(0, 48, 120, 0.28)
        !important;
}

#start-screen
.pg-welcome-gift-button
.pg-welcome-gift-icon {
    font-size:
        26px !important;
}

#start-screen
.pg-welcome-gift-button strong {
    font-size:
        14px !important;
}

#start-screen
.pg-welcome-gift-button small {
    font-size:
        9px !important;

    margin-top:
        2px !important;
}

#start-screen
.pg-welcome-gift-button:hover {
    transform:
        translateY(-4px)
        scale(1.025)
        !important;

    box-shadow:
        0 8px 0 #063f89,
        0 15px 27px rgba(0, 48, 120, 0.36),
        0 0 20px rgba(255, 211, 61, 0.3)
        !important;
}
/* ==================================================
   توزيع احترافي جديد للصفحة الرئيسية
================================================== */

html body #start-screen {
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(25, 116, 224, 0.28),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(255, 169, 0, 0.2),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #17243f,
            #354767 48%,
            #303a52
        ) !important;
}

/* توسيع مساحة الصفحة بدل حصرها في الوسط */
html body #start-screen
.poster-container {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    min-height: 650px !important;

    margin: 0 !important;

    background-position:
        center center !important;

    background-size:
        auto 100% !important;

    background-repeat:
        no-repeat !important;

    overflow: hidden !important;
}

/* زر الحساب في المساحة اليمنى */
html body #start-screen
.pg-account-entry {
    position: absolute !important;

    top: 34px !important;
    right: clamp(
        30px,
        7vw,
        105px
    ) !important;

    left: auto !important;
    bottom: auto !important;

    width: 245px !important;
    min-height: 70px !important;

    transform: none !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            135deg,
            #047cba,
            #14b6c7
        ) !important;

    box-shadow:
        0 8px 0 #07527a,
        0 18px 38px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(34, 218, 255, 0.28)
        !important;
}

/* بطاقة الهدية في المساحة اليسرى */
html body #start-screen
.pg-welcome-gift-button {
    position: absolute !important;

    top: 34px !important;
    left: clamp(
        30px,
        7vw,
        105px
    ) !important;

    right: auto !important;
    bottom: auto !important;

    width: 270px !important;
    min-height: 70px !important;

    padding:
        10px 16px !important;

    transform: none !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            135deg,
            #0869cf,
            #08aada
        ) !important;

    box-shadow:
        0 8px 0 #06478c,
        0 18px 38px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(255, 198, 36, 0.25)
        !important;
}

/* تكبير النصوص قليلًا بعد نقل البطاقات */
html body #start-screen
.pg-welcome-gift-button strong,
html body #start-screen
.pg-account-entry strong {
    font-size:
        17px !important;
}

html body #start-screen
.pg-welcome-gift-button small,
html body #start-screen
.pg-account-entry small {
    font-size:
        11px !important;
}

/* حركة Hover من دون العودة إلى المنتصف */
html body #start-screen
.pg-welcome-gift-button:hover,
html body #start-screen
.pg-account-entry:hover {
    transform:
        translateY(-5px)
        scale(1.025)
        !important;

    filter:
        brightness(1.13)
        saturate(1.08)
        !important;
}

/* أزرار البداية مرتبة في المنتصف بالأسفل */
html body #start-screen
.start-buttons {
    position: absolute !important;

    left: 50% !important;
    bottom: 18px !important;

    width: min(
        500px,
        82vw
    ) !important;

    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;

    transform:
        translateX(-50%)
        !important;
}

/* شريط التحميل في المنتصف بمساحة أوسع */
html body #start-screen
.start-loading-animation {
    left: 50% !important;
    bottom: 92px !important;

    width: min(
        430px,
        76vw
    ) !important;

    transform:
        translateX(-50%)
        !important;
}

/* الشاشات الأضيق */
@media (max-width: 900px) {
    html body #start-screen
    .pg-account-entry {
        top: 18px !important;
        right: 16px !important;

        width:
            min(215px, 43vw)
            !important;
    }

    html body #start-screen
    .pg-welcome-gift-button {
        top: 18px !important;
        left: 16px !important;

        width:
            min(230px, 43vw)
            !important;
    }

    html body #start-screen
    .pg-welcome-gift-button strong,
    html body #start-screen
    .pg-account-entry strong {
        font-size:
            13px !important;
    }

    html body #start-screen
    .pg-welcome-gift-button small,
    html body #start-screen
    .pg-account-entry small {
        font-size:
            9px !important;
    }
}
/* محاذاة صندوق الحساب والهدية حول الصورة الوسطى */
html body #start-screen
.pg-welcome-gift-button {
    top: 42px !important;

    left: auto !important;
    right:
        calc(50% + 285px)
        !important;

    width: 270px !important;
    min-height: 70px !important;
}

html body #start-screen
.pg-account-entry {
    top: 42px !important;

    right: auto !important;
    left:
        calc(50% + 285px)
        !important;

    width: 270px !important;
    min-height: 70px !important;
}

/* حماية الترتيب في الشاشات الأضيق */
@media (max-width: 1100px) {
    html body #start-screen
    .pg-welcome-gift-button {
        left: 18px !important;
        right: auto !important;
    }

    html body #start-screen
    .pg-account-entry {
        right: 18px !important;
        left: auto !important;
    }
}
/* تحكم يدوي نهائي بمكان صندوق الحساب */
html body #start-screen
#pgAccountOpen {
    position: absolute !important;

    /* فوق وتحت:
       زِد الرقم لينزل، قلّله ليصعد */
    top: 20px !important;

    /* يمين ويسار:
       زِد الرقم ليتحرك إلى اليسار،
       قلّله ليتحرك إلى اليمين */
    right: 30px !important;

    left: auto !important;
    bottom: auto !important;

    /* حجم الصندوق */
    width: 270px !important;
    height: 73px !important;
    min-height: 73px !important;

    margin: 0 !important;
    transform: none !important;
}
/* ==========================================
   المربعات الممنوعة مؤقتًا في لعبة البازل
========================================== */

.puzzle-tile.pg-puzzle-tile-locked {
    position: relative !important;
    cursor: not-allowed !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 66, 84, 0.42),
            rgba(145, 15, 38, 0.52)
        ) !important;

    border-color:
        rgba(255, 115, 125, 0.9)
        !important;

    color:
        rgba(255, 255, 255, 0.68)
        !important;

    box-shadow:
        inset 0 0 12px
            rgba(100, 0, 20, 0.42),
        0 0 7px
            rgba(255, 55, 75, 0.38)
        !important;

    filter:
        saturate(0.82)
        brightness(0.82)
        !important;
}

/* علامة القفل */
.puzzle-tile.pg-puzzle-tile-locked::after {
    content: "🔒";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size:
        clamp(9px, 1.15vw, 17px);

    line-height: 1;

    color: #ffffff;

    background:
        rgba(90, 0, 18, 0.18);

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, 0.75);

    z-index: 5;
}

/* منع مؤثر التحويم على المربع المقفول */
.puzzle-tile.pg-puzzle-tile-locked:hover {
    transform: none !important;
    filter:
        saturate(0.82)
        brightness(0.82)
        !important;
}
/* ==========================================
   عرض أول حرف داخل سؤال الشبكة
========================================== */

#pg-hex-question-overlay
.pg-hex-first-letter-hint {
    position: relative;
    z-index: 25;

    width: fit-content;
    min-width: 230px;
    max-width: min(90%, 440px);

    margin:
        14px auto 8px;

    padding:
        12px 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    direction: rtl;
    text-align: center;

    color: #ffffff;

    font-size:
        clamp(18px, 2vw, 27px);

    font-weight: 900;

    line-height: 1.4;

    background:
        linear-gradient(
            135deg,
            rgba(255, 180, 0, 0.96),
            rgba(255, 112, 20, 0.96)
        );

    border:
        3px solid #ffe66a;

    border-radius: 18px;

    box-shadow:
        0 8px 0
            rgba(135, 52, 0, 0.7),
        0 15px 28px
            rgba(0, 0, 0, 0.34),
        0 0 24px
            rgba(255, 184, 34, 0.48);

    text-shadow:
        0 2px 3px
            rgba(0, 0, 0, 0.4);

    animation:
        pgHexFirstLetterAppear
        0.45s
        cubic-bezier(
            0.2,
            1.4,
            0.45,
            1
        )
        both;
}

@keyframes pgHexFirstLetterAppear {
    from {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(0.82);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

#pg-hex-question-overlay
.pg-hex-first-letter-hint.pg-hex-hidden {
    display: none !important;
}

@media (max-width: 700px) {
    #pg-hex-question-overlay
    .pg-hex-first-letter-hint {
        min-width: 190px;

        margin-top: 10px;

        padding:
            10px 17px;

        font-size: 18px;

        border-width: 2px;
    }
}

/* ==========================================
   فيديو شرح لعبة البازل
========================================== */

.pg-puzzle-tutorial-video {
    display: none;

    width: 100%;
    max-width: 900px;

    aspect-ratio: 16 / 9;

    margin:
        16px auto 4px;

    object-fit: contain;

    background:
        #03132f;

    border:
        3px solid
        rgba(60, 190, 255, 0.92);

    border-radius: 20px;

    box-shadow:
        0 18px 38px
            rgba(0, 0, 0, 0.42),
        0 0 28px
            rgba(42, 181, 255, 0.28);

    overflow: hidden;
}

/* توسيع صندوق شرح البازل للفيديو */
#pg-mode-info-overlay:not(
    .pg-mode-info-hex
)
.pg-mode-info-box {
    width:
        min(94vw, 980px);

    max-height: 92vh;

    overflow-y: auto;
}

/* إبقاء زر الإغلاق فوق الفيديو */
#pg-mode-info-overlay
.pg-mode-info-close {
    position: absolute;
    z-index: 50;
}

@media (max-width: 700px) {
    .pg-puzzle-tutorial-video {
        margin-top: 10px;

        border-radius: 14px;

        border-width: 2px;
    }

    #pg-mode-info-overlay:not(
        .pg-mode-info-hex
    )
    .pg-mode-info-box {
        width: 96vw;

        padding:
            45px 12px 16px;
    }
}
/* ==========================================
   إظهار فيديو شرح البازل كاملًا
========================================== */

html body
#pg-mode-info-overlay:not(
    .pg-mode-info-hex
)
.pg-mode-info-box {
    width:
        min(94vw, 1050px)
        !important;

    height:
        min(94vh, 760px)
        !important;

    max-height:
        94vh
        !important;

    padding:
        18px 28px 20px
        !important;

    display: flex
        !important;

    flex-direction: column
        !important;

    align-items: center
        !important;

    overflow: hidden
        !important;
}

/* تصغير مساحة العنوان */
html body
#pg-mode-info-overlay:not(
    .pg-mode-info-hex
)
.pg-mode-info-icon {
    font-size: 42px
        !important;

    margin: 0 0 3px
        !important;
}

html body
#pg-mode-info-overlay:not(
    .pg-mode-info-hex
)
#pg-mode-info-title {
    margin: 2px 0 5px
        !important;

    font-size:
        clamp(24px, 2.4vw, 34px)
        !important;
}

html body
#pg-mode-info-overlay:not(
    .pg-mode-info-hex
)
#pg-mode-info-text {
    margin: 0 0 10px
        !important;

    line-height: 1.4
        !important;
}

/* احتواء الفيديو كاملًا داخل المساحة المتبقية */
html body
#pg-mode-info-overlay
#pg-puzzle-tutorial-video {
    flex: 1 1 auto
        !important;

    width: auto
        !important;

    max-width: 100%
        !important;

    height: auto
        !important;

    min-height: 0
        !important;

    max-height: calc(
        94vh - 165px
    ) !important;

    margin: 0 auto
        !important;

    object-fit: contain
        !important;

    aspect-ratio: 16 / 9
        !important;
}
/* ==========================================
   خيارات فئة نغمة وأغنية
========================================== */

html body #nagham-song-options {
    display: none !important;
}

html body:has(
    #nagham-song-category:checked
)
#nagham-song-options {
    display: block !important;
}

.nagham-song-options {
    margin: 22px auto;
    padding: 22px;
    max-width: 760px;

    border:
        2px solid rgba(
            54,
            201,
            255,
            0.72
        );

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(9, 67, 126, 0.96),
            rgba(44, 27, 105, 0.96)
        );

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.3);
}

.nagham-song-options h3 {
    margin: 0 0 18px;
    color: #ffffff;
    text-align: center;
}

.nagham-song-mode-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.nagham-song-mode {
    cursor: pointer;
}

.nagham-song-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nagham-song-mode span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 64px;
    padding: 12px;

    color: #ffffff;
    font-weight: 800;
    text-align: center;

    border:
        2px solid
        rgba(255, 255, 255, 0.24);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.1);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.nagham-song-mode:hover span {
    transform: translateY(-4px);
    background:
        rgba(55, 190, 255, 0.2);
}

.nagham-song-mode
input:checked + span {
    color: #102653;
    border-color: #ffd33d;
    background:
        linear-gradient(
            135deg,
            #ffe66b,
            #ffb51b
        );

    box-shadow:
        0 0 22px
        rgba(255, 207, 48, 0.5);
}

@media (max-width: 650px) {
    .nagham-song-mode-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   تصميم فئة نغمة وأغنية
========================================== */

.nagham-song-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 22px;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(0, 207, 255, 0.24),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(173, 66, 255, 0.24),
            transparent 34%
        ),
        rgba(1, 17, 46, 0.94);

    backdrop-filter: blur(12px);
}

.nagham-song-overlay.hidden {
    display: none !important;
}

.nagham-song-box {
    position: relative;

    width: min(720px, 94vw);
    min-height: 540px;

    padding: 38px 40px;

    text-align: center;

    border:
        3px solid
        rgba(54, 207, 255, 0.88);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            #123e83,
            #24216e 65%,
            #401a66
        );

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, 0.5),
        0 0 45px
        rgba(42, 199, 255, 0.28),
        inset 0 1px 0
        rgba(255, 255, 255, 0.2);
}

.nagham-song-close {
    position: absolute;
    top: 18px;
    left: 20px;

    width: 46px;
    height: 46px;

    color: #ffffff;
    font-size: 30px;
    font-weight: 900;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.14);

    cursor: pointer;
}

.nagham-song-title {
    color: #69dcff;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;

    text-shadow:
        0 0 22px
        rgba(71, 211, 255, 0.55);
}

.nagham-song-team {
    display: inline-flex;

    margin: 20px auto 12px;
    padding: 9px 22px;

    color: #ffffff;
    font-size: 20px;
    font-weight: 900;

    border:
        2px solid
        rgba(255, 255, 255, 0.3);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.12);
}

.nagham-song-timer {
    margin: 14px auto;

    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

#nagham-song-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-left: 8px;

    color: #142653;
    font-size: 38px;
    font-weight: 1000;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffe96f,
            #ffad18
        );

    box-shadow:
        0 0 26px
        rgba(255, 196, 36, 0.5);
}

.nagham-song-question {
    margin: 22px 0;

    color: #ffffff;
    font-size: clamp(20px, 3vw, 29px);
    font-weight: 800;
}

.nagham-song-play,
.nagham-song-show-answer {
    display: block;

    width: min(370px, 90%);
    min-height: 62px;

    margin: 16px auto;

    color: #ffffff;
    font-size: 21px;
    font-weight: 900;

    border:
        2px solid
        rgba(255, 255, 255, 0.3);

    border-radius: 18px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.nagham-song-play {
    background:
        linear-gradient(
            135deg,
            #00a8e8,
            #1769e0
        );
}

.nagham-song-show-answer {
    color: #17274d;

    background:
        linear-gradient(
            135deg,
            #ffe76b,
            #ffb51b
        );
}

.nagham-song-play:hover,
.nagham-song-show-answer:hover {
    transform: translateY(-4px);
    filter: brightness(1.12);
}

.nagham-song-answer {
    margin: 20px auto;
    padding: 22px;

    color: #ffe36a;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 1000;

    border:
        2px solid
        rgba(255, 226, 91, 0.72);

    border-radius: 20px;

    background:
        rgba(4, 25, 67, 0.72);
}

.nagham-song-result-buttons {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
    margin-top: 20px;
}

.nagham-song-result-buttons.hidden {
    display: none !important;
}

.nagham-song-correct,
.nagham-song-wrong {
    min-height: 62px;

    color: #ffffff;
    font-size: 20px;
    font-weight: 900;

    border: 0;
    border-radius: 17px;

    cursor: pointer;
}

.nagham-song-correct {
    background:
        linear-gradient(
            135deg,
            #19c76b,
            #05893f
        );
}

.nagham-song-wrong {
    background:
        linear-gradient(
            135deg,
            #ff5269,
            #c8153b
        );
}

@media (max-width: 620px) {
    .nagham-song-box {
        padding: 34px 18px;
        min-height: 500px;
    }

    .nagham-song-result-buttons {
        grid-template-columns: 1fr;
    }
}
/* إخفاء مؤقت فئة نغمة وأغنية نهائيًا */
html body #nagham-song-overlay
.nagham-song-timer {
    display: none !important;
}
/* ==========================================
   وضع عرض إجابة نغمة وأغنية
========================================== */

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-question,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
#nagham-song-play,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
#nagham-song-show-answer {
    display: none !important;
}

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-box {
    min-height: 0 !important;
    height: auto !important;
    padding:
        34px 40px 38px !important;
    gap: 22px !important;
}

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-answer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: min(620px, 92%);
    min-height: 120px;
    margin: 5px auto 0;
}
/* ==========================================
   أزرار نتيجة نغمة وأغنية
========================================== */

html body #nagham-song-result-buttons {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(720px, 94%);
    margin: 12px auto 0;
}

html body #nagham-song-result-buttons.hidden {
    display: none !important;
}

html body .nagham-song-team-result {
    min-height: 68px;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 18px;
    color: #ffffff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

html body .nagham-song-team-result:hover {
    transform:
        translateY(-4px)
        scale(1.025);
    filter: brightness(1.12);
}

html body .nagham-song-team-result:active {
    transform:
        translateY(0)
        scale(0.98);
}

/* الفريق الأول */
html body .nagham-song-team-one {
    background:
        linear-gradient(
            135deg,
            #ff3158,
            #b70e39
        );
    border-color: #ff8299;
    box-shadow:
        0 7px 0 #70051f,
        0 12px 24px
            rgba(255, 38, 83, 0.3);
}

/* الفريق الثاني */
html body .nagham-song-team-two {
    background:
        linear-gradient(
            135deg,
            #18d979,
            #087e49
        );
    border-color: #75ffb8;
    box-shadow:
        0 7px 0 #034c2b,
        0 12px 24px
            rgba(20, 218, 119, 0.28);
}

/* لا أحد */
html body .nagham-song-no-one {
    background:
        linear-gradient(
            135deg,
            #66748f,
            #303b52
        );
    border-color: #aab4c8;
    box-shadow:
        0 7px 0 #1b2231,
        0 12px 24px
            rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
    html body #nagham-song-result-buttons {
        grid-template-columns: 1fr;
    }
}
/* ==========================================
   أزرار نتيجة نغمة وأغنية
========================================== */

html body #nagham-song-result-buttons {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(720px, 94%);
    margin: 12px auto 0;
}

html body #nagham-song-result-buttons.hidden {
    display: none !important;
}

html body .nagham-song-team-result {
    min-height: 68px;
    padding: 12px 16px;
    border: 2px solid transparent;
    border-radius: 18px;
    color: #ffffff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

html body .nagham-song-team-result:hover {
    transform:
        translateY(-4px)
        scale(1.025);
    filter: brightness(1.12);
}

html body .nagham-song-team-result:active {
    transform:
        translateY(0)
        scale(0.98);
}

/* الفريق الأول */
html body .nagham-song-team-one {
    background:
        linear-gradient(
            135deg,
            #ff3158,
            #b70e39
        );
    border-color: #ff8299;
    box-shadow:
        0 7px 0 #70051f,
        0 12px 24px
            rgba(255, 38, 83, 0.3);
}

/* الفريق الثاني */
html body .nagham-song-team-two {
    background:
        linear-gradient(
            135deg,
            #18d979,
            #087e49
        );
    border-color: #75ffb8;
    box-shadow:
        0 7px 0 #034c2b,
        0 12px 24px
            rgba(20, 218, 119, 0.28);
}

/* لا أحد */
html body .nagham-song-no-one {
    background:
        linear-gradient(
            135deg,
            #66748f,
            #303b52
        );
    border-color: #aab4c8;
    box-shadow:
        0 7px 0 #1b2231,
        0 12px 24px
            rgba(0, 0, 0, 0.25);
}

@media (max-width: 700px) {
    html body #nagham-song-result-buttons {
        grid-template-columns: 1fr;
    }
}
/* مؤقت الإجابة يظهر فقط بعد انتهاء المقطع */
html body #nagham-song-overlay
.nagham-song-timer {
    display: none !important;
}

html body #nagham-song-overlay.nagham-answer-time
.nagham-song-timer {
    display: flex !important;
}

html body #nagham-song-show-answer:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

html body #nagham-song-overlay.nagham-answer-time
#nagham-song-play {
    display: none !important;
}

html body #nagham-song-overlay.nagham-time-ended
.nagham-song-timer {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ef334f,
            #9d1231
        );
}
/* ==========================================
   التصميم النهائي لفئة نغمة وأغنية
========================================== */

/* إخفاء زر الإجابة حتى ينتهي المقطع */
html body #nagham-song-show-answer:disabled {
    display: none !important;
}

/* الخلفية المتحركة */
html body #nagham-song-overlay {
    position: fixed;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 220, 255, 0.25),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(255, 54, 185, 0.24),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #03152f,
            #112866 48%,
            #311459
        ) !important;
    background-size:
        145% 145%,
        145% 145%,
        100% 100% !important;
    animation:
        naghamBackgroundMove
        12s ease-in-out infinite alternate;
}

/* نوتات موسيقية متحركة */
html body #nagham-song-overlay::before {
    content:
        "♪  ♫  ♬  ♪  ♩  ♫  ♪  ♬";
    position: absolute;
    z-index: -2;
    inset: -20%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.1);
    font-size: clamp(45px, 7vw, 100px);
    font-weight: 900;
    letter-spacing: clamp(20px, 5vw, 75px);
    white-space: nowrap;
    transform: rotate(-12deg);
    animation:
        naghamNotesFloat
        17s linear infinite;
}

/* نقاط ولمعات */
html body #nagham-song-overlay::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 221, 76, 0.9) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(59, 222, 255, 0.8) 0 2px,
            transparent 3px
        );
    background-size:
        95px 95px,
        135px 135px;
    background-position:
        10px 15px,
        55px 70px;
    opacity: 0.45;
    animation:
        naghamSparklesMove
        14s linear infinite;
}

/* الصندوق الرئيسي */
html body #nagham-song-overlay
.nagham-song-box {
    position: relative;
    overflow: hidden;
    border:
        2px solid rgba(
            79,
            219,
            255,
            0.9
        ) !important;
    background:
        linear-gradient(
            145deg,
            rgba(15, 57, 130, 0.97),
            rgba(45, 29, 115, 0.97)
        ) !important;
    box-shadow:
        0 0 35px rgba(44, 203, 255, 0.25),
        0 25px 70px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation:
        naghamBoxEntrance
        0.55s cubic-bezier(
            0.2,
            0.9,
            0.3,
            1.2
        );
}

/* موجة ضوئية داخل الصندوق */
html body #nagham-song-overlay
.nagham-song-box::before {
    content: "";
    position: absolute;
    inset: -50%;
    pointer-events: none;
    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(46, 218, 255, 0.12),
            transparent 28%,
            rgba(255, 62, 186, 0.1),
            transparent 58%
        );
    animation:
        naghamGlowRotate
        12s linear infinite;
}

/* إبقاء العناصر فوق المؤثرات */
html body #nagham-song-overlay
.nagham-song-box > * {
    position: relative;
    z-index: 2;
}

/* زر التشغيل */
html body #nagham-song-play {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #04c7e8,
            #1478ed
        ) !important;
    box-shadow:
        0 8px 0 #06499d,
        0 14px 30px
            rgba(20, 171, 238, 0.35);
    animation:
        naghamPlayPulse
        2s ease-in-out infinite;
}

/* تصميم الإجابة */
html body #nagham-song-answer:not(.hidden) {
    color: #ffe15b !important;
    border:
        2px solid #ffd633 !important;
    background:
        linear-gradient(
            135deg,
            rgba(4, 22, 65, 0.96),
            rgba(28, 30, 91, 0.96)
        ) !important;
    box-shadow:
        0 0 24px
            rgba(255, 215, 48, 0.22),
        inset 0 0 24px
            rgba(47, 172, 255, 0.08);
    animation:
        naghamAnswerReveal
        0.55s ease both;
}

/* حركة دخول أزرار النتيجة */
html body #nagham-song-result-buttons:not(.hidden)
.nagham-song-team-result {
    animation:
        naghamResultButtonEntrance
        0.45s ease both;
}

html body #nagham-song-result-buttons:not(.hidden)
.nagham-song-team-result:nth-child(2) {
    animation-delay: 0.1s;
}

html body #nagham-song-result-buttons:not(.hidden)
.nagham-song-team-result:nth-child(3) {
    animation-delay: 0.2s;
}

/* الحركات */
@keyframes naghamBackgroundMove {
    from {
        background-position:
            0% 0%,
            100% 100%,
            center;
    }

    to {
        background-position:
            100% 70%,
            0% 25%,
            center;
    }
}

@keyframes naghamNotesFloat {
    from {
        transform:
            translate3d(-8%, 12%, 0)
            rotate(-12deg);
    }

    to {
        transform:
            translate3d(8%, -12%, 0)
            rotate(-7deg);
    }
}

@keyframes naghamSparklesMove {
    from {
        background-position:
            10px 15px,
            55px 70px;
    }

    to {
        background-position:
            105px -80px,
            -80px -65px;
    }
}

@keyframes naghamGlowRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes naghamBoxEntrance {
    from {
        opacity: 0;
        transform:
            translateY(28px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes naghamPlayPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

@keyframes naghamAnswerReveal {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes naghamResultButtonEntrance {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==========================================
   إخراج شاشة نغمة وأغنية مثل الفئات الخاصة
========================================== */

/* زر التشغيل يختفي بعد الضغط */
html body #nagham-song-overlay.nagham-is-playing
#nagham-song-play {
    display: none !important;
}

/* اسم الفريق أعلى اليسار */
html body #nagham-song-overlay
.nagham-song-team {
    position: fixed !important;
    z-index: 50 !important;
    top: 110px !important;
    left: 32px !important;
    right: auto !important;
    min-width: 135px;
    margin: 0 !important;
    padding: 10px 18px !important;
    border:
        2px solid #46cfff !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            135deg,
            #116eb8,
            #16409a
        ) !important;
    color: #ffffff !important;
    text-align: center;
    box-shadow:
        0 7px 0 #08295e,
        0 12px 24px
            rgba(0, 0, 0, 0.3);
}

/* المؤقت الدائري */
html body #nagham-song-overlay
.nagham-song-timer {
    --nagham-timer-progress:
        360deg;

    position: fixed !important;
    z-index: 50 !important;
    top: 175px !important;
    left: 46px !important;
    right: auto !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background:
        conic-gradient(
            #ff9f1c
                var(
                    --nagham-timer-progress
                ),
            rgba(255, 255, 255, 0.16)
                0
        ) !important;

    color: transparent !important;
    font-size: 0 !important;

    box-shadow:
        0 10px 0 #071a3d,
        0 16px 30px
            rgba(0, 0, 0, 0.36);
}

/* الفراغ الداخلي للدائرة */
html body #nagham-song-overlay
.nagham-song-timer::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #092657,
            #102f74
        );
}

/* رقم الوقت */
html body #nagham-song-overlay
#nagham-song-time {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    font-size: 35px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

/* إظهار المؤقت بعد انتهاء المقطع */
html body #nagham-song-overlay.nagham-answer-time
.nagham-song-timer {
    display: flex !important;
}

/* آخر خمس ثوانٍ */
html body #nagham-song-overlay
.nagham-song-timer.nagham-final-seconds {
    background:
        conic-gradient(
            #ff294d
                var(
                    --nagham-timer-progress
                ),
            rgba(255, 255, 255, 0.14)
                0
        ) !important;

    animation:
        naghamTimerDanger
        0.65s ease-in-out infinite;
}

/* إخفاء الفريق والمؤقت في صفحة الإجابة */
html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-team,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-timer {
    display: none !important;
}

/* ترتيب أزرار صفحة الإجابة */
html body #nagham-song-result-buttons {
    direction: ltr !important;
    grid-template-areas:
        "team-two no-one team-one"
        !important;
}

html body #nagham-song-team-one {
    grid-area: team-one;
}

html body #nagham-song-no-one {
    grid-area: no-one;
}

html body #nagham-song-team-two {
    grid-area: team-two;
}

/* حركة آخر خمس ثوانٍ */
@keyframes naghamTimerDanger {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.08);
        filter: brightness(1.3);
    }
}
/* ==========================================
   التسلسل النهائي لشاشة نغمة وأغنية
========================================== */

/* زر الإجابة لا يظهر قبل انتهاء المقطع */
html body #nagham-song-overlay
#nagham-song-show-answer {
    display: none !important;
}

/* يظهر فقط عند بدء وقت الإجابة */
html body #nagham-song-overlay.nagham-answer-time
#nagham-song-show-answer:not(.hidden) {
    display: block !important;
}

/* زر التشغيل يختفي فور تشغيل الصوت */
html body #nagham-song-overlay.nagham-is-playing
#nagham-song-play {
    display: none !important;
}

/* اسم الفريق أعلى اليسار */
html body #nagham-song-overlay
.nagham-song-team {
    position: fixed !important;
    top: 112px !important;
    left: 30px !important;
    right: auto !important;
    z-index: 100 !important;
}

/* المؤقت تحت اسم الفريق */
html body #nagham-song-overlay
.nagham-song-timer {
    position: fixed !important;
    top: 180px !important;
    left: 46px !important;
    right: auto !important;
    z-index: 100 !important;
}

/* المؤقت لا يظهر إلا بعد انتهاء الصوت */
html body #nagham-song-overlay:not(
    .nagham-answer-time
)
.nagham-song-timer {
    display: none !important;
}

html body #nagham-song-overlay.nagham-answer-time
.nagham-song-timer {
    display: flex !important;
}

/* تنظيف صفحة الإجابة من العناصر غير المطلوبة */
html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-team,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-timer,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
#nagham-song-play,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
#nagham-song-show-answer,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-question,

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
#nagham-song-audio {
    display: none !important;
}
/* ==========================================
   التصميم السينمائي لفئة نغمة وأغنية
========================================== */

html body #nagham-song-overlay {
    isolation: isolate;
    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 224, 255, 0.32),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 22%,
            rgba(175, 55, 255, 0.3),
            transparent 31%
        ),
        radial-gradient(
            circle at 72% 88%,
            rgba(255, 45, 146, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #020d24 0%,
            #071d49 34%,
            #27145c 68%,
            #16082f 100%
        ) !important;

    background-size:
        145% 145%,
        150% 150%,
        145% 145%,
        100% 100% !important;

    animation:
        naghamFinalBackground
        13s ease-in-out infinite alternate
        !important;
}

/* النوتات الموسيقية العائمة */
html body #nagham-song-overlay::before {
    content:
        "♪   ♫   ♬   ♩   ♪   ♫   ♬";

    position: absolute;
    z-index: -2;
    inset: -25%;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255, 255, 255, 0.1);

    font-size:
        clamp(48px, 7vw, 105px);

    font-weight: 900;
    letter-spacing:
        clamp(25px, 6vw, 90px);

    white-space: nowrap;
    pointer-events: none;

    text-shadow:
        0 0 22px
            rgba(38, 219, 255, 0.3),
        0 0 42px
            rgba(177, 57, 255, 0.22);

    animation:
        naghamFinalNotes
        18s linear infinite
        !important;
}

/* جسيمات ولمعات متحركة */
html body #nagham-song-overlay::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            #5deaff 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            #ffe052 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle,
            rgba(255, 74, 181, 0.9)
                0 2px,
            transparent 3px
        );

    background-size:
        90px 90px,
        137px 137px,
        175px 175px;

    background-position:
        10px 20px,
        55px 75px,
        110px 35px;

    opacity: 0.52;

    animation:
        naghamFinalParticles
        16s linear infinite
        !important;
}

/* الصندوق الرئيسي */
html body #nagham-song-overlay
.nagham-song-box {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    width:
        min(760px, 90vw) !important;

    min-height:
        510px !important;

    padding:
        42px 45px !important;

    border:
        2px solid
        rgba(80, 220, 255, 0.92)
        !important;

    border-radius:
        32px !important;

    background:
        linear-gradient(
            145deg,
            rgba(8, 50, 118, 0.96),
            rgba(30, 27, 103, 0.97) 55%,
            rgba(60, 20, 101, 0.96)
        ) !important;

    box-shadow:
        0 0 0 1px
            rgba(255, 255, 255, 0.08),
        0 0 34px
            rgba(35, 213, 255, 0.28),
        0 25px 75px
            rgba(0, 0, 0, 0.55),
        inset 0 1px 0
            rgba(255, 255, 255, 0.2)
        !important;

    animation:
        naghamFinalBoxEntrance
        0.6s
        cubic-bezier(
            0.2,
            0.9,
            0.25,
            1.15
        )
        both !important;
}

/* هالة ضوئية تدور داخل الصندوق */
html body #nagham-song-overlay
.nagham-song-box::before {
    content: "";

    position: absolute;
    z-index: -2;
    inset: -70%;

    pointer-events: none;

    background:
        conic-gradient(
            from 0deg,
            transparent 0 17%,
            rgba(60, 224, 255, 0.18)
                22%,
            transparent 30% 48%,
            rgba(255, 71, 184, 0.16)
                55%,
            transparent 65% 82%,
            rgba(255, 218, 63, 0.14)
                88%,
            transparent 96%
        );

    animation:
        naghamFinalGlowRotation
        14s linear infinite;
}

/* موجات موسيقية أسفل الصندوق */
html body #nagham-song-overlay
.nagham-song-box::after {
    content:
        "▂ ▅ ▇ ▃ ▆ ▂ █ ▄ ▇ ▃ ▅ ▂ ▆ ▄ ▇";

    position: absolute;
    z-index: -1;

    left: 50%;
    bottom: 16px;

    width: 100%;

    color:
        rgba(91, 226, 255, 0.14);

    font-size:
        27px;

    letter-spacing:
        7px;

    text-align: center;
    white-space: nowrap;

    transform:
        translateX(-50%);

    pointer-events: none;

    animation:
        naghamFinalEqualizer
        1.25s ease-in-out infinite alternate;
}

/* العنوان */
html body #nagham-song-overlay
.nagham-song-title {
    color: #66e8ff !important;

    font-size:
        clamp(30px, 4vw, 45px)
        !important;

    text-shadow:
        0 0 12px
            rgba(68, 224, 255, 0.55),
        0 4px 0
            rgba(0, 0, 0, 0.25);

    animation:
        naghamFinalTitleGlow
        2.3s ease-in-out infinite;
}

/* زر التشغيل */
html body #nagham-song-overlay
#nagham-song-play {
    border:
        2px solid
        rgba(112, 234, 255, 0.9)
        !important;

    background:
        linear-gradient(
            135deg,
            #00c8e8,
            #137def,
            #6050eb
        ) !important;

    background-size:
        180% 180% !important;

    box-shadow:
        0 8px 0 #073d91,
        0 15px 32px
            rgba(0, 179, 244, 0.38)
        !important;

    animation:
        naghamFinalPlayButton
        2.1s ease-in-out infinite
        !important;
}

/* زر إظهار الإجابة */
html body #nagham-song-overlay
#nagham-song-show-answer {
    border:
        2px solid #ffe174
        !important;

    background:
        linear-gradient(
            135deg,
            #ffe45d,
            #ffae20
        ) !important;

    box-shadow:
        0 7px 0 #b66b08,
        0 14px 28px
            rgba(255, 177, 31, 0.28)
        !important;

    animation:
        naghamFinalAnswerButton
        0.48s ease both
        !important;
}

/* ==========================================
   صفحة الإجابة
========================================== */

html body #nagham-song-overlay:has(
    #nagham-song-answer:not(.hidden)
)
.nagham-song-box {
    min-height:
        430px !important;

    justify-content:
        center !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 38, 94, 0.98),
            rgba(39, 23, 104, 0.98),
            rgba(79, 22, 91, 0.97)
        ) !important;

    border-color:
        #ffd84a !important;

    box-shadow:
        0 0 38px
            rgba(255, 215, 61, 0.23),
        0 25px 75px
            rgba(0, 0, 0, 0.58),
        inset 0 0 35px
            rgba(47, 183, 255, 0.08)
        !important;
}

/* بطاقة الإجابة */
html body #nagham-song-answer:not(.hidden) {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width:
        min(650px, 92%) !important;

    min-height:
        135px !important;

    margin:
        22px auto 10px !important;

    padding:
        24px 30px !important;

    border:
        2px solid #ffe060
        !important;

    border-radius:
        25px !important;

    background:
        linear-gradient(
            135deg,
            rgba(3, 24, 65, 0.96),
            rgba(22, 32, 99, 0.96)
        ) !important;

    color:
        #ffe35d !important;

    font-size:
        clamp(25px, 3vw, 37px)
        !important;

    font-weight:
        1000 !important;

    line-height:
        1.55 !important;

    text-align:
        center !important;

    text-shadow:
        0 0 12px
            rgba(255, 218, 62, 0.35);

    box-shadow:
        0 0 26px
            rgba(255, 218, 56, 0.18),
        inset 0 0 25px
            rgba(51, 191, 255, 0.08)
        !important;

    animation:
        naghamFinalAnswerReveal
        0.58s
        cubic-bezier(
            0.2,
            0.9,
            0.3,
            1.18
        )
        both !important;
}

/* حركة دخول أزرار التحكيم */
html body #nagham-song-result-buttons:not(.hidden)
button {
    animation:
        naghamFinalResultEntrance
        0.48s ease both;
}

html body #nagham-song-result-buttons:not(.hidden)
button:nth-child(2) {
    animation-delay:
        0.09s;
}

html body #nagham-song-result-buttons:not(.hidden)
button:nth-child(3) {
    animation-delay:
        0.18s;
}

/* ==========================================
   الحركات
========================================== */

@keyframes naghamFinalBackground {
    from {
        background-position:
            0% 0%,
            100% 0%,
            70% 100%,
            center;
    }

    to {
        background-position:
            100% 75%,
            0% 85%,
            20% 10%,
            center;
    }
}

@keyframes naghamFinalNotes {
    from {
        transform:
            translate3d(-8%, 13%, 0)
            rotate(-11deg)
            scale(1);
    }

    to {
        transform:
            translate3d(9%, -12%, 0)
            rotate(-5deg)
            scale(1.08);
    }
}

@keyframes naghamFinalParticles {
    from {
        background-position:
            10px 20px,
            55px 75px,
            110px 35px;
    }

    to {
        background-position:
            100px -75px,
            -80px -62px,
            285px -140px;
    }
}

@keyframes naghamFinalGlowRotation {
    to {
        transform:
            rotate(360deg);
    }
}

@keyframes naghamFinalBoxEntrance {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(0.93);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes naghamFinalEqualizer {
    from {
        transform:
            translateX(-50%)
            scaleY(0.65);
        opacity: 0.1;
    }

    to {
        transform:
            translateX(-50%)
            scaleY(1.25);
        opacity: 0.23;
    }
}

@keyframes naghamFinalTitleGlow {
    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.35)
            drop-shadow(
                0 0 10px
                rgba(65, 228, 255, 0.55)
            );
    }
}

@keyframes naghamFinalPlayButton {
    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
        background-position:
            0% 50%;
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.035);
        background-position:
            100% 50%;
    }
}

@keyframes naghamFinalAnswerButton {
    from {
        opacity: 0;
        transform:
            translateY(12px)
            scale(0.95);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes naghamFinalAnswerReveal {
    from {
        opacity: 0;
        transform:
            translateY(24px)
            scale(0.9);
        filter:
            blur(5px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter:
            blur(0);
    }
}

@keyframes naghamFinalResultEntrance {
    from {
        opacity: 0;
        transform:
            translateY(20px)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* ==========================================
   منع ظهور الصورة خلف مربعات البازل المقفلة
========================================== */

html body .puzzle-tile.pg-puzzle-tile-locked {
    opacity: 1 !important;

    background:
        linear-gradient(
            145deg,
            #8f2439 0%,
            #68172c 52%,
            #421020 100%
        ) !important;

    background-color:
        #68172c !important;

    background-image:
        linear-gradient(
            145deg,
            #8f2439,
            #68172c 52%,
            #421020
        ) !important;

    mix-blend-mode:
        normal !important;

    filter:
        none !important;

    box-shadow:
        inset 0 0 0 2px
            rgba(255, 112, 134, 0.3),
        inset 0 0 18px
            rgba(0, 0, 0, 0.28)
        !important;
}

/* ضمان أن أي طبقة شفافة قديمة لا تكشف الصورة */
html body .puzzle-tile.pg-puzzle-tile-locked::before {
    background:
        linear-gradient(
            145deg,
            #8f2439,
            #68172c 52%,
            #421020
        ) !important;

    opacity: 1 !important;
}
/* ==================================================
   صندوق اختيار وقت أسئلة البازل
   ================================================== */

#setup-screen .pg-puzzle-time-settings {
    width: min(760px, 100%);
    margin: 0 auto 24px;
    padding: 18px;

    box-sizing: border-box;
    direction: rtl;

    border: 1px solid rgba(94, 190, 255, 0.48);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(31, 145, 255, 0.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(9, 43, 91, 0.96),
            rgba(4, 25, 61, 0.98)
        );

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.26),
        inset 0 0 22px rgba(68, 174, 255, 0.08);
}


/* عنوان الصندوق */

#setup-screen .pg-puzzle-time-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 16px;
    text-align: right;
}

#setup-screen .pg-puzzle-time-title > span {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    font-size: 27px;

    border: 1px solid rgba(105, 207, 255, 0.55);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 132, 236, 0.95),
            rgba(39, 70, 201, 0.95)
        );

    box-shadow:
        0 0 18px rgba(45, 168, 255, 0.35);
}

#setup-screen .pg-puzzle-time-title div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#setup-screen .pg-puzzle-time-title strong {
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}

#setup-screen .pg-puzzle-time-title small {
    color: #a9cdec;
    font-size: 13px;
    font-weight: 600;
}


/* خيارات الوقت */

#setup-screen .pg-puzzle-time-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#setup-screen .pg-puzzle-time-option {
    position: relative;
    overflow: hidden;

    min-height: 72px;
    padding: 12px 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;

    border: 1px solid rgba(83, 161, 228, 0.58);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 65, 124, 0.92),
            rgba(6, 35, 78, 0.96)
        );

    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.035);

    transition:
        transform 0.18s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

#setup-screen .pg-puzzle-time-option:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);

    border-color: rgba(105, 211, 255, 0.92);

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(48, 174, 255, 0.25);
}

#setup-screen .pg-puzzle-time-option:active {
    transform: translateY(1px) scale(0.98);
}


/* إخفاء دائرة Radio الأصلية */

#setup-screen .pg-puzzle-time-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* نص الخيار */

#setup-screen .pg-puzzle-time-option > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    text-align: center;
}

#setup-screen .pg-puzzle-time-option strong {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
}

#setup-screen .pg-puzzle-time-option small {
    color: #b9d5ee;
    font-size: 14px;
    font-weight: 700;
}


/* الخيار المحدد */

#setup-screen .pg-puzzle-time-option:has(input:checked) {
    border-color: #68dcff;

    background:
        linear-gradient(
            145deg,
            rgba(18, 139, 242, 0.98),
            rgba(48, 65, 207, 0.98)
        );

    box-shadow:
        0 0 0 2px rgba(104, 220, 255, 0.16),
        0 0 23px rgba(42, 174, 255, 0.50),
        inset 0 0 17px rgba(255, 255, 255, 0.09);
}


/* علامة الصح للخيار المحدد */

#setup-screen .pg-puzzle-time-option:has(input:checked)::after {
    content: "✓";

    position: absolute;
    top: 8px;
    left: 10px;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    color: #06385f;
    font-size: 16px;
    font-weight: 1000;

    border-radius: 50%;
    background: #84e7ff;

    box-shadow:
        0 0 12px rgba(101, 222, 255, 0.75);

    animation: pgPuzzleTimeCheck 0.22s ease;
}

@keyframes pgPuzzleTimeCheck {
    from {
        opacity: 0;
        transform: scale(0.45) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}


/* ضبط العرض على الشاشات الصغيرة */

@media (max-width: 650px) {
    #setup-screen .pg-puzzle-time-settings {
        padding: 14px;
        margin-bottom: 18px;
    }

    #setup-screen .pg-puzzle-time-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    #setup-screen .pg-puzzle-time-option {
        min-height: 65px;
    }
}

/* ترتيب أزرار تحكيم الشبكة الثلاثة */
html body
#pg-hex-question-overlay.pg-hex-question-overlay:not(.pg-hex-closest-mode)
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: min(900px, 88vw) !important;
    gap: 16px !important;
}
/* ==================================================
   توحيد مكان مؤقت الشبكة واسم الفريق
   ================================================== */

/* المؤقت أعلى اليسار */
html body
#pg-hex-question-overlay.pg-hex-question-overlay
#pg-hex-question-timer:not(.pg-hex-hidden) {
    position: absolute !important;
    top: 24px !important;
    left: 42px !important;
    right: auto !important;
    z-index: 220 !important;

    margin: 0 !important;
}

/* اسم الفريق مباشرة تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-question-overlay
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;
    top: 112px !important;
    left: 18px !important;
    right: auto !important;
    z-index: 220 !important;

    width: 132px !important;
    min-width: 132px !important;

    padding: 8px 7px !important;

    box-sizing: border-box !important;
    text-align: center !important;
}

/* عند ظهور الإجابة يختفي المؤقت والاسم معًا */
html body
#pg-hex-question-overlay.pg-hex-question-overlay:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-timer,

html body
#pg-hex-question-overlay.pg-hex-question-overlay:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}
/* ==================================================
   منع خروج أزرار تحكيم الشبكة من بطاقة الإجابة
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-question-overlay
.pg-hex-question-card {
    overflow-x: hidden !important;
}

html body
#pg-hex-question-overlay.pg-hex-question-overlay:not(.pg-hex-closest-mode)
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: min(900px, calc(100% - 28px)) !important;
    max-width: 100% !important;

    margin: 18px auto 0 !important;

    transform: none !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;
}

html body
#pg-hex-question-overlay.pg-hex-question-overlay
#pg-hex-judgement-buttons button {
    width: 100% !important;
    min-width: 0 !important;

    padding-right: 10px !important;
    padding-left: 10px !important;

    white-space: normal !important;
}
/* تصميم زر تقديم الإجابة في الشبكة */
html body
#pg-hex-question-overlay
#pg-hex-submit-answer:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(390px, 72vw) !important;
    min-height: 54px !important;

    margin: 14px auto 10px !important;
    padding: 11px 22px !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    border: 2px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            #168fe5,
            #2452c7
        ) !important;

    box-shadow:
        0 7px 0 #153887,
        0 13px 22px rgba(0, 0, 0, 0.28),
        0 0 19px rgba(54, 164, 255, 0.30) !important;

    transition:
        transform 0.18s ease,
        filter 0.18s ease !important;
}

html body
#pg-hex-question-overlay
#pg-hex-submit-answer:not(.pg-hex-hidden):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1) !important;
}

html body
#pg-hex-question-overlay
#pg-hex-submit-answer:not(.pg-hex-hidden):active {
    transform: translateY(5px) !important;
    box-shadow: none !important;
}
/* ==================================================
   تنزيل محتوى السؤال العادي في الشبكة
   وإبعاده عن المؤقت
   ================================================== */

/* الأسئلة العادية فقط، دون الفئات الخاصة */
html body
#pg-hex-question-overlay.pg-hex-question-overlay:not(.pg-hex-flags-mode):not(.pg-hex-odd-one-out-mode):not(.pg-hex-zoom-mode):not(.pg-hex-focus-mode):not(.pg-hex-closest-mode):not(.pg-hex-listen-focus-mode):not(.pg-hex-charades-mode):not(.pg-hex-cipher-mode):not(.pg-hex-moving-letters-mode)
#pg-hex-question-text {
    margin-top: 135px !important;
    margin-bottom: 30px !important;
}
/* تنزيل محتوى السؤال العادي في الشبكة */
html body
#pg-hex-question-overlay.pg-hex-question-overlay:not(.pg-hex-flags-mode):not(.pg-hex-odd-one-out-mode):not(.pg-hex-zoom-mode):not(.pg-hex-focus-mode):not(.pg-hex-closest-mode):not(.pg-hex-listen-focus-mode):not(.pg-hex-charades-mode):not(.pg-hex-cipher-mode):not(.pg-hex-moving-letters-mode)
#pg-hex-question-text {
    margin-top: 135px !important;
    margin-bottom: 30px !important;
}
/* الحروف المتحركة: محاذاة المؤقت واسم الفريق */
html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-timer:not(.pg-hex-hidden) {
    top: 24px !important;
    left: 42px !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    top: 112px !important;
    left: 18px !important;

    width: 132px !important;
    min-width: 132px !important;
}
/* الكرات المتحركة: تنزيل أزرار التحكيم في صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: min(850px, calc(100% - 32px)) !important;

    margin:
        34px
        auto
        12px !important;

    transform: none !important;
}
/* زوم في الشبكة: تقريب اسم الفريق من المؤقت */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-timer:not(.pg-hex-hidden) {
    top: 24px !important;
    left: 42px !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    top: 112px !important;
    left: 18px !important;

    width: 132px !important;
    min-width: 132px !important;
}
/* ==================================================
   زوم في الشبكة: تثبيت الاسم ورفع إظهار الإجابة
   ================================================== */

/* وضع حاوية اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
.pg-hex-question-header {
    position: absolute !important;

    top: 130px !important;
    left: 64px !important;
    right: auto !important;

    width: 128px !important;
    margin: 0 !important;

    z-index: 230 !important;
    transform: none !important;
}

/* إلغاء التموضع القديم من الاسم نفسه */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: static !important;

    display: block !important;

    width: 128px !important;
    min-width: 128px !important;

    margin: 0 !important;
}

/* رفع زر إظهار الإجابة للأعلى */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: relative !important;
    top: -25px !important;

    margin-bottom: 0 !important;
}
/* زوم الشبكة: ترتيب أزرار التحكيم الثلاثة في صف واحد */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: min(900px, calc(100% - 30px)) !important;
    gap: 16px !important;

    margin:
        20px
        auto
        10px !important;
}

/* صاحب الدور على اليمين */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-correct-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

/* لا أحد في المنتصف */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-wrong-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* الفريق المنافس على اليسار */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-second-team-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
/* زوم الشبكة: توحيد قياس أزرار التحكيم */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden)
button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    box-sizing: border-box !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
}
/* إصلاح نهائي لأزرار نتيجة زوم */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: min(900px, calc(100% - 30px)) !important;
    gap: 16px !important;

    margin: 18px auto 0 !important;
}

/* توحيد قياس الأزرار الثلاثة بالقوة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons:not(.pg-hex-hidden)
button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 60px !important;
    min-height: 60px !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    box-sizing: border-box !important;
}
/* ==================================================
   الترتيب الثابت لجميع أزرار التحكيم
   يمين: الفريق الأول
   الوسط: لا أحد
   اليسار: الفريق الثاني
   ================================================== */

html body
:is(
    #pgFixedOrderContainer,
    [data-pg-fixed-team-order="true"]
):not(.hidden):not(.pg-hex-hidden):not([hidden]) {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    direction: ltr !important;
    gap: 16px !important;
}

/* الفريق الأول على اليمين */
html body
:is(
    #pgFixedOrderContainer,
    [data-pg-fixed-team-order="true"]
)
:is(
    #pgFixedTeamOneButton,
    [data-pg-judge-position="team-one"]
) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

/* لا أحد في الوسط */
html body
:is(
    #pgFixedOrderContainer,
    [data-pg-fixed-team-order="true"]
)
:is(
    #pgFixedNoWinnerButton,
    [data-pg-judge-position="no-winner"]
) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* الفريق الثاني على اليسار */
html body
:is(
    #pgFixedOrderContainer,
    [data-pg-fixed-team-order="true"]
)
:is(
    #pgFixedTeamTwoButton,
    [data-pg-judge-position="team-two"]
) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* توحيد مساحة الأزرار الثلاثة */
html body
:is(
    #pgFixedOrderContainer,
    [data-pg-fixed-team-order="true"]
)
> button[data-pg-judge-position] {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
    direction: rtl !important;
}
/* تكبير شاشة فيديو شوف وركّز */
html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-video:not(.pg-hex-hidden) {
    width: min(1280px, 94vw) !important;
    height: min(700px, 90dvh) !important;
}
/* شوف وركّز: رفع اسم الفريق ومنع التموضع المزدوج */
html body
#pg-hex-question-overlay.pg-hex-focus-mode
.pg-hex-question-header {
    position: absolute !important;

    top: 122px !important;
    left: 65px !important;
    right: auto !important;

    width: 130px !important;
    margin: 0 !important;

    z-index: 230 !important;
    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: static !important;

    display: block !important;

    width: 130px !important;
    min-width: 130px !important;

    margin: 0 !important;
}
/* اسمع وركّز: تثبيت اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
.pg-hex-question-header {
    position: absolute !important;

    top: 120px !important;
    left: 64px !important;
    right: auto !important;

    width: 130px !important;
    margin: 0 !important;

    z-index: 230 !important;
    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: static !important;

    display: block !important;

    width: 130px !important;
    min-width: 130px !important;

    margin: 0 !important;
}
/* الحروف المتحركة: تثبيت اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
.pg-hex-question-header {
    position: absolute !important;

    top: 118px !important;
    left: 18px !important;
    right: auto !important;

    width: 132px !important;
    margin: 0 !important;

    z-index: 230 !important;
    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 112px !important;
    left: 18px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* الحروف المتحركة: تثبيت أزرار التحكيم أسفل صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -30px !important;

    width: min(900px, 86vw) !important;

    margin: 0 !important;

    transform:
        translateX(-50%) !important;

    z-index: 250 !important;
}
/* إصلاح نهائي: أزرار تحكيم الحروف المتحركة أسفل الشاشة */
html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: fixed !important;

    top: auto !important;
    right: auto !important;
    bottom: 80px !important;
    left: 50% !important;

    width: min(900px, 86vw) !important;
    margin: 0 !important;

    transform:
        translateX(-50%) !important;

    z-index: 500 !important;
}
/* جاي بالغلط: تثبيت اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-question-header {
    position: absolute !important;

    top: 112px !important;
    left: 18px !important;
    right: auto !important;

    width: 132px !important;
    margin: 0 !important;

    z-index: 230 !important;
    transform: none !important;
}

html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 112px !important;
    left: 18px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* جاي بالغلط: زر تقديم الإجابة أعلى اليمين */
html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
#pg-hex-submit-answer:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 28px !important;
    right: 28px !important;
    bottom: auto !important;
    left: auto !important;

    width: 320px !important;
    margin: 0 !important;

    transform: none !important;

    z-index: 300 !important;
}
/* ==================================================
   بدون كلام: تصميم رسالة مشاركة الفريق الثاني
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-charades-second-team-message:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(680px, 68vw) !important;
    min-height: 82px !important;

    margin:
        48px
        auto
        0 !important;

    padding: 16px 30px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
    font-size: clamp(21px, 2vw, 29px) !important;
    font-weight: 900 !important;
    text-align: center !important;

    border: 3px solid #74e8ff !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 116, 210, 0.97),
            rgba(77, 45, 183, 0.97)
        ) !important;

    box-shadow:
        0 10px 0 #13387c,
        0 19px 35px rgba(0, 0, 0, 0.36),
        0 0 30px rgba(87, 220, 255, 0.38) !important;

    animation:
        pgHexCharadesMessageEntrance
        0.4s ease both !important;
}

/* تنزيل زر إظهار الإجابة بعد صندوق الرسالة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    margin:
        40px
        auto
        0 !important;
}

@keyframes pgHexCharadesMessageEntrance {
    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}
/* بدون كلام: لا نحتاج زر تقديم الإجابة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-submit-answer {
    display: none !important;
}
/* بدون كلام: إخفاء رسالة المشاركة في صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-charades-second-team-message {
    display: none !important;
}

/* بدون كلام - إخفاء اسم الفريق في صفحة الإجابة فقط */
html body
#pg-hex-question-overlay.pg-hex-charades-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}
/* إظهار اسم الفريق في صفحة الكيور كود لفئة بدون كلام */
html body
#pg-hex-question-overlay.pg-hex-charades-mode
.pg-hex-question-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
}

html body
#pg-hex-question-overlay.pg-hex-charades-mode
#pg-hex-question-cell-number {
    display: none !important;
}
/* تثبيت شاشة البازل داخل نافذة المتصفح */
#game-screen.screen.active {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100 !important;
}
/* اسم الفريق أعلى يسار الشاشة مثل الفئات الخاصة */
html body #nagham-song-overlay
.nagham-song-team {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    margin: 0 !important;
    z-index: 100001 !important;
}
/* مؤقت نغمة وأغنية تحت اسم الفريق */
html body #nagham-song-overlay
.nagham-song-timer {
    position: fixed !important;
    top: 92px !important;
    left: 35px !important;

    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background:
        conic-gradient(
            #ff9f1c
                var(
                    --nagham-timer-progress,
                    360deg
                ),
            rgba(255, 255, 255, 0.16)
                0
        ) !important;

    box-shadow:
        0 10px 0 #071a3d,
        0 16px 30px
            rgba(0, 0, 0, 0.36) !important;

    z-index: 100001 !important;
}
/* إزالة الخلفية البرتقالية من داخل مؤقت نغمة وأغنية */
html body #nagham-song-overlay
#nagham-song-time {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #ffffff !important;
    border-radius: 0 !important;
}
/* زر تقديم إجابة نغمة وأغنية في مكان موحّد */
html body #nagham-song-overlay
.nagham-song-submit-answer {
    position: fixed !important;
    top: 420px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100001 !important;

    width: min(370px, 90vw);
    min-height: 62px;
    padding: 10px 20px;

    border: 2px solid #ffffff;
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffb52e,
            #f08300
        );

    color: #ffffff;
    font-family: Cairo, sans-serif;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 0 #b85e00,
        0 11px 22px
            rgba(184, 94, 0, 0.3);
}
/* إخفاء زر تقديم الإجابة نهائيًا في نغمة وأغنية */
html body
#nagham-song-overlay
#nagham-song-submit-answer {
    display: none !important;
}
/* إخفاء زر تقديم إجابة نغمة وأغنية بعد تقديم الفريق الثاني */
html body
#nagham-song-overlay
#nagham-song-submit-answer.hidden {
    display: none !important;
}
/* منع إغلاق سؤال نغمة وأغنية بالخطأ */
html body #nagham-song-close {
    display: none !important;
}
/* منع إغلاق سؤال زوم بالخطأ */
html body #zoom-question-close {
    display: none !important;
}
/* المؤقت واسم الفريق أعلى يسار الصفحة وليس داخل صندوق السؤال */
html body
#pg-hex-question-overlay
#pg-hex-question-timer:not(.pg-hex-hidden) {
    position: fixed !important;
    top: 22px !important;
    left: 28px !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 99999 !important;
}

html body
#pg-hex-question-overlay
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: fixed !important;
    top: 110px !important;
    left: 15px !important;
    right: auto !important;

    width: 130px !important;
    min-width: 130px !important;
    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;
    z-index: 99999 !important;
}
.golden-info-box {
    position: relative;

    width: min(620px, 88%);
    margin: 18px auto 4px;
    padding: 14px 72px 14px 20px;

    box-sizing: border-box;
    white-space: pre-line;
    text-align: right;
    direction: rtl;

    color: #ffffff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;

    background:
        linear-gradient(
            135deg,
            rgba(255, 215, 80, 0.13),
            rgba(255, 255, 255, 0.06)
        );

    border: 1px solid rgba(255, 215, 80, 0.55);
    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    animation:
        goldenInfoAppear 0.5s ease both;
}

.golden-info-box::before {
    content: "💡";

    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffe58a,
            #f2b91f
        );

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.18);

    font-size: 21px;
}

.golden-info-box::first-line {
    color: #ffd95a;
    font-size: 17px;
    font-weight: 800;
}
@keyframes goldenInfoAppear {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* ==========================================
   فئة فكّ القفل — التصميم الأساسي
=========================================== */

.secret-lock-hidden {
    display: none !important;
}

.secret-lock-overlay {
    --lock-navy: #06132f;
    --lock-blue: #1267d8;
    --lock-cyan: #32d8ff;
    --lock-gold: #ffd45a;
    --lock-gold-dark: #a86d00;
    --lock-green: #2ee28e;
    --lock-red: #ff4f6d;

    position: fixed;
    z-index: 100000;
    inset: 0;

    overflow-y: auto;
    padding: 20px;

    color: white;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(50, 216, 255, 0.30),
            transparent 34%
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 82px,
            rgba(255, 255, 255, 0.025) 83px 85px
        ),
        linear-gradient(
            145deg,
            #030919,
            #0b2455 55%,
            #06132f
        );
}

.secret-lock-shell {
    width: min(1080px, 100%);
    margin: auto;
}

.secret-lock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 16px;
}

.secret-lock-header h2 {
    margin: 7px 0 0;

    color: white;
    font-size: clamp(32px, 5vw, 58px);

    text-shadow:
        0 5px 0 rgba(0, 0, 0, 0.32);
}

.secret-lock-badge,
.secret-lock-difficulty {
    display: inline-block;

    padding: 7px 16px;
    border-radius: 999px;

    font-weight: 900;
}

.secret-lock-badge {
    color: var(--lock-navy);
    background: var(--lock-gold);

    box-shadow:
        0 5px 0 var(--lock-gold-dark);
}

.secret-lock-difficulty {
    border:
        2px solid rgba(255, 255, 255, 0.50);

    background:
        rgba(255, 255, 255, 0.10);
}

/* اللوحة الرئيسية */

.secret-lock-panel {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.8fr)
        minmax(360px, 1.4fr);

    gap: 24px;
    padding: 24px;

    border:
        2px solid rgba(255, 255, 255, 0.24);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.38),
        inset 0 0 40px rgba(50, 216, 255, 0.07);
}

/* باب الخزنة */

.secret-lock-vault {
    aspect-ratio: 1;

    align-self: center;

    display: grid;
    place-items: center;

    border: 14px solid #344157;
    border-radius: 34px;

    background:
        radial-gradient(
            circle,
            #526074,
            #202a3d 62%,
            #111827 63%
        );

    box-shadow:
        inset 0 0 0 7px #778398,
        inset 0 0 40px #030712,
        0 15px 30px rgba(0, 0, 0, 0.45);
}

.secret-lock-ring {
    width: 58%;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border: 13px dashed #b7c1cf;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #25334a,
            #111827
        );

    box-shadow:
        0 0 0 12px #67748a,
        inset 0 0 22px black;
}

.secret-lock-ring span {
    font-size:
        clamp(64px, 10vw, 120px);

    filter:
        drop-shadow(0 8px 5px black);
}

/* التلميحات */

.secret-lock-status {
    margin: 0 0 14px;

    color: #d9f8ff;

    font-size: 20px;
    font-weight: 800;
}

.secret-lock-hints {
    display: grid;
    gap: 11px;

    margin-bottom: 18px;
}

.secret-lock-hint {
    display: grid;

    grid-template-columns:
        104px 1fr;

    align-items: center;
    gap: 14px;

    min-height: 69px;
    padding: 10px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            rgba(18, 103, 216, 0.34),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        inset -4px 0 0 var(--lock-cyan);
}

.secret-lock-hint-number {
    direction: ltr;

    color: var(--lock-gold);

    font-size: 30px;
    font-weight: 900;
    letter-spacing: 8px;
}

.secret-lock-hint-text {
    font-size:
        clamp(14px, 2vw, 18px);

    font-weight: 700;
    line-height: 1.5;
}

/* منطقة وقت الفريق */

.secret-lock-thinking {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    gap: 13px;

    font-size: 21px;
    font-weight: 900;
}

.secret-lock-timer {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--lock-navy);
    background: var(--lock-gold);

    font-size: 28px;
    font-weight: 900;

    box-shadow:
        0 6px 0 var(--lock-gold-dark);
}

/* الأزرار */

.secret-lock-button {
    border: 0;
    border-radius: 15px;

    padding: 13px 22px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.secret-lock-button:active {
    transform: translateY(4px);
}

.secret-lock-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.secret-lock-gold {
    color: var(--lock-navy);
    background: var(--lock-gold);

    box-shadow:
        0 7px 0 var(--lock-gold-dark);
}

.secret-lock-dark {
    color: white;
    background: #344157;

    box-shadow:
        0 7px 0 #182135;
}

.secret-lock-blue {
    color: white;
    background: var(--lock-blue);

    box-shadow:
        0 7px 0 #073b88;
}
/* ==========================================
   فكّ القفل — إدخال الرمز والنتيجة
=========================================== */

.secret-lock-entry {
    position: fixed;
    z-index: 100001;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 16px;

    background:
        rgba(1, 7, 22, 0.92);

    backdrop-filter: blur(9px);
}

.secret-lock-entry-card {
    width: min(520px, 100%);

    padding: 26px;

    border:
        2px solid rgba(255, 212, 90, 0.65);

    border-radius: 26px;

    text-align: center;

    background:
        linear-gradient(
            160deg,
            #102d66,
            #06132f
        );

    box-shadow:
        0 25px 70px black,
        inset 0 0 35px
        rgba(50, 216, 255, 0.08);
}

.secret-lock-entry-card > strong:first-child {
    color: var(--lock-gold);

    font-size: 27px;
    font-weight: 900;
}

.secret-lock-code {
    direction: ltr;

    display: flex;
    justify-content: center;
    gap: 12px;

    margin: 22px 0;
}

.secret-lock-code span {
    width: 78px;
    height: 88px;

    display: grid;
    place-items: center;

    border: 3px solid #6e7d94;
    border-radius: 15px;

    color: var(--lock-gold);
    background: #030919;

    font-size: 48px;
    font-weight: 900;

    box-shadow:
        inset 0 0 18px black;
}

.secret-lock-keypad {
    direction: ltr;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 9px;
}

.secret-lock-key {
    border: 1px solid #7c8ba3;
    border-radius: 12px;

    padding: 13px 5px;

    color: white;

    background:
        linear-gradient(
            #3f4d64,
            #1f293b
        );

    font-size: 24px;
    font-weight: 900;

    box-shadow:
        0 5px 0 #0b101c;

    cursor: pointer;
}

.secret-lock-key:active {
    transform: translateY(4px);

    box-shadow:
        0 1px 0 #0b101c;
}

.secret-lock-entry-actions {
    display: flex;
    justify-content: center;
    gap: 12px;

    margin-top: 19px;
}

/* رسالة حفظ الرمز */

.secret-lock-sealed-card > span {
    display: block;

    font-size: 92px;

    animation:
        secretLockSealed 0.6s
        ease alternate infinite;
}

.secret-lock-sealed-card > strong {
    direction: ltr;

    color: var(--lock-gold);

    font-size: 56px;
    letter-spacing: 16px;
}

/* ==========================================
   منطقة النتيجة
=========================================== */

.secret-lock-result {
    margin-top: 20px;
    padding: 24px;

    text-align: center;

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.08);
}

.secret-lock-result h3 {
    margin-top: 0;

    font-size: 26px;
}

.secret-lock-team-results {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
    margin-bottom: 18px;
}

.secret-lock-team-card {
    padding: 18px;

    border: 3px solid transparent;
    border-radius: 22px;

    background: #0d1f45;

    transition:
        0.35s ease;
}

.secret-lock-team-one {
    border-color: #24c2ff;
}

.secret-lock-team-two {
    border-color: #ff4f6d;
}

.secret-lock-team-card h4 {
    margin: 0;

    font-size: 20px;
}

.secret-lock-mini {
    display: block;

    font-size: 52px;
}

.secret-lock-team-card strong {
    direction: ltr;

    display: block;

    margin: 8px 0;

    color: var(--lock-gold);

    font-size: 38px;
    letter-spacing: 7px;
}

.secret-lock-team-card small {
    display: block;

    min-height: 26px;

    font-size: 17px;
    font-weight: 900;
}

/* الفريق الذي فتح القفل */

.secret-lock-team-card.is-success {
    color: var(--lock-navy);

    border-color: var(--lock-green);

    background:
        var(--lock-green);

    transform:
        scale(1.03);

    box-shadow:
        0 0 35px
        rgba(46, 226, 142, 0.65);
}

.secret-lock-team-card.is-success strong {
    color: var(--lock-navy);
}

/* الفريق صاحب الرقم الخاطئ */

.secret-lock-team-card.is-failure {
    opacity: 0.65;

    animation:
        secretLockShake 0.45s ease;
}

.secret-lock-winner {
    min-height: 48px;

    margin: 12px auto;

    font-size:
        clamp(22px, 4vw, 36px);

    font-weight: 900;
}

.secret-lock-solution {
    margin: 15px auto 20px;
    padding: 14px;

    border-radius: 16px;

    color: var(--lock-navy);
    background: var(--lock-gold);

    font-size: 23px;
    font-weight: 900;
}

/* ==========================================
   الحركات والمؤثرات
=========================================== */

.secret-lock-vault.is-testing
.secret-lock-ring {
    animation:
        secretLockSpin 1.2s
        cubic-bezier(0.2, 0.7, 0.2, 1);
}

.secret-lock-vault.is-open {
    animation:
        secretLockGlow 0.8s
        ease infinite alternate;
}

.secret-lock-timer.is-danger {
    color: white;
    background: var(--lock-red);

    box-shadow:
        0 6px 0 #9f1733;

    animation:
        secretLockPulse 0.55s
        infinite alternate;
}

@keyframes secretLockSpin {
    to {
        transform: rotate(720deg);
    }
}

@keyframes secretLockGlow {
    to {
        box-shadow:
            inset 0 0 0 7px #ffd45a,
            inset 0 0 55px #2ee28e,
            0 0 45px #2ee28e;
    }
}

@keyframes secretLockPulse {
    to {
        transform: scale(1.08);
    }
}

@keyframes secretLockSealed {
    to {
        transform: translateY(-10px);
    }
}

@keyframes secretLockShake {
    20%,
    60% {
        transform: translateX(-9px);
    }

    40%,
    80% {
        transform: translateX(9px);
    }
}

/* دخول التلميحات بالتتابع */

.secret-lock-hint {
    opacity: 0;

    animation:
        secretLockHintEnter
        0.55s ease forwards;
}

.secret-lock-hint:nth-child(1) {
    animation-delay: 0.10s;
}

.secret-lock-hint:nth-child(2) {
    animation-delay: 0.25s;
}

.secret-lock-hint:nth-child(3) {
    animation-delay: 0.40s;
}

.secret-lock-hint:nth-child(4) {
    animation-delay: 0.55s;
}

@keyframes secretLockHintEnter {
    from {
        opacity: 0;

        transform:
            translateX(35px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

/* حركة إضاءة في الخلفية */

.secret-lock-overlay::before {
    content: "";

    position: fixed;
    inset: -50%;

    pointer-events: none;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(50, 216, 255, 0.08),
            transparent 28%
        );

    animation:
        secretLockBackground 15s
        linear infinite;
}

.secret-lock-shell {
    position: relative;
    z-index: 1;
}

@keyframes secretLockBackground {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   الهواتف والشاشات الصغيرة
=========================================== */

@media (max-width: 760px) {

    .secret-lock-overlay {
        padding: 10px;
    }

    .secret-lock-panel {
        grid-template-columns: 1fr;

        padding: 14px;
    }

    .secret-lock-vault {
        width: min(210px, 62%);

        margin: auto;

        border-width: 9px;
        border-radius: 25px;
    }

    .secret-lock-hint {
        grid-template-columns:
            82px 1fr;

        padding: 9px;
    }

    .secret-lock-hint-number {
        font-size: 25px;
        letter-spacing: 5px;
    }

    .secret-lock-team-results {
        gap: 8px;
    }

    .secret-lock-team-card {
        padding: 10px 5px;
    }

    .secret-lock-team-card h4 {
        font-size: 15px;
    }

    .secret-lock-mini {
        font-size: 40px;
    }

    .secret-lock-team-card strong {
        font-size: 28px;
    }

    .secret-lock-entry-actions {
        flex-direction: column;
    }
}
#secret-lock-entry {
    position: static;
    inset: auto;
    z-index: auto;

    display: block;

    width: 100%;
    margin-top: 22px;
    padding: 0;

    background: transparent;
    backdrop-filter: none;
}
/* فك القفل - نسخة مضغوطة بدون سكرول */

.secret-lock-header {
    display: none !important;
}

.secret-lock-vault {
    display: none !important;
}

.secret-lock-difficulty {
    display: none !important;
}

#secret-lock-keypad {
    display: none !important;
}

.secret-lock-status {
    font-size: 15px !important;
    margin: 0 0 10px !important;
    opacity: 0.85;
}

.secret-lock-shell {
    padding-top: 12px !important;
}

.secret-lock-panel {
    min-height: 0 !important;
}
/* فك القفل - ضغط منطقة إدخال الرمز */

.secret-lock-entry-card {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

.secret-lock-entry-card > p {
    display: none !important;
}

#secret-lock-entry-team {
    font-size: 18px !important;
}

.secret-lock-code {
    margin: 10px 0 !important;
    gap: 8px !important;
}

.secret-lock-code span {
    width: 58px !important;
    height: 50px !important;
    font-size: 28px !important;
}

.secret-lock-entry-actions {
    margin-top: 10px !important;
}
.secret-lock-puzzle {
    width: 100%;
}

.secret-lock-hints {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.secret-lock-hint {
    padding: 10px !important;
    min-height: 0 !important;
}

.secret-lock-hint strong {
    font-size: 24px !important;
}

.secret-lock-hint p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 4px 0 0 !important;
}
/* ===== إصلاح تخطيط فك القفل ===== */

#secret-lock-overlay .secret-lock-shell {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

#secret-lock-overlay .secret-lock-panel {
    width: 100% !important;
    max-width: none !important;
}

#secret-lock-overlay .secret-lock-puzzle {
    width: 100% !important;
    max-width: none !important;
}

#secret-lock-overlay .secret-lock-hints {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

#secret-lock-overlay .secret-lock-hint {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

#secret-lock-entry {
    width: 100% !important;
    max-width: none !important;
}
#secret-lock-overlay .secret-lock-panel {
    grid-template-columns: 1fr !important;
}
/* فك القفل - إخفاء عبارة الفريق يفكر */
#secret-lock-thinking-text {
    display: none !important;
}
/* ===== فك القفل: المؤقت أعلى يسار الشاشة ===== */

#secret-lock-thinking {
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    right: auto !important;

    width: auto !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;

    z-index: 100005 !important;
    background: transparent !important;
}

#secret-lock-timer {
    order: 1 !important;
}

#secret-lock-team-label {
    order: 2 !important;
    margin: 0 !important;
    text-align: center !important;
}

#secret-lock-ready {
    display: none !important;
}
/* ===== فك القفل: تنظيف صفحة الإجابة ===== */

#secret-lock-result h3,
#secret-lock-team1-card,
#secret-lock-team2-card {
    display: none !important;
}

#secret-lock-result {
    width: 100% !important;
    max-width: none !important;
    padding: 18px !important;
}

#secret-lock-solution {
    display: block !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin: 18px 0 !important;
}
/* ===== خلفية متحركة لفئة فك القفل ===== */

#secret-lock-overlay {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 210, 255, 0.18), transparent 32%),
        radial-gradient(circle at 80% 25%, rgba(255, 205, 60, 0.16), transparent 30%),
        radial-gradient(circle at 50% 85%, rgba(120, 80, 255, 0.16), transparent 34%),
        linear-gradient(135deg, #07152f 0%, #0b2348 45%, #08182f 100%) !important;
}

#secret-lock-overlay::before,
#secret-lock-overlay::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    opacity: 0.45;
    z-index: 0;
}

#secret-lock-overlay::before {
    width: 320px;
    height: 320px;
    left: -90px;
    top: 15%;
    background: radial-gradient(
        circle,
        rgba(0, 220, 255, 0.28),
        rgba(0, 220, 255, 0)
    );
    animation: secretLockFloatOne 8s ease-in-out infinite alternate;
}

#secret-lock-overlay::after {
    width: 360px;
    height: 360px;
    right: -110px;
    bottom: 8%;
    background: radial-gradient(
        circle,
        rgba(255, 200, 60, 0.24),
        rgba(255, 200, 60, 0)
    );
    animation: secretLockFloatTwo 10s ease-in-out infinite alternate;
}

#secret-lock-overlay .secret-lock-shell {
    position: relative;
    z-index: 2;
}

@keyframes secretLockFloatOne {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(80px, 50px) scale(1.15);
    }
}

@keyframes secretLockFloatTwo {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-90px, -55px) scale(1.18);
    }
}
/* ===== رموز متحركة في خلفية فك القفل ===== */

.secret-lock-bg-symbols {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.secret-lock-bg-symbols span {
    position: absolute;
    font-size: 42px;
    font-weight: 900;
    opacity: 0.08;
    animation: secretLockSymbolFloat 14s linear infinite;
}

.secret-lock-bg-symbols span:nth-child(1) {
    left: 8%;
    top: 80%;
    animation-delay: 0s;
}

.secret-lock-bg-symbols span:nth-child(2) {
    left: 18%;
    top: 65%;
    animation-delay: -2s;
}

.secret-lock-bg-symbols span:nth-child(3) {
    left: 32%;
    top: 88%;
    animation-delay: -5s;
}

.secret-lock-bg-symbols span:nth-child(4) {
    left: 48%;
    top: 72%;
    animation-delay: -7s;
}

.secret-lock-bg-symbols span:nth-child(5) {
    left: 62%;
    top: 85%;
    animation-delay: -3s;
}

.secret-lock-bg-symbols span:nth-child(6) {
    left: 74%;
    top: 68%;
    animation-delay: -8s;
}

.secret-lock-bg-symbols span:nth-child(7) {
    left: 86%;
    top: 82%;
    animation-delay: -4s;
}

.secret-lock-bg-symbols span:nth-child(8) {
    left: 94%;
    top: 70%;
    animation-delay: -10s;
}

@keyframes secretLockSymbolFloat {
    0% {
        transform: translateY(40px) rotate(0deg) scale(0.9);
        opacity: 0;
    }

    15% {
        opacity: 0.08;
    }

    50% {
        transform: translateY(-260px) rotate(12deg) scale(1.05);
    }

    85% {
        opacity: 0.08;
    }

    100% {
        transform: translateY(-520px) rotate(-10deg) scale(0.9);
        opacity: 0;
    }
}
/* ===== رفع نتيجة فك القفل للأعلى ===== */

#secret-lock-result {
    transform: translateY(-55px) !important;
}
#secret-lock-status {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.7 !important;

    max-width: 900px !important;
    margin: 0 auto 18px !important;
    padding: 10px 18px !important;

    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 16px !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
/* ===== تصميم احترافي لنتيجة فك القفل ===== */

#secret-lock-solution {
    width: min(760px, 92%) !important;
    margin: 18px auto 0 !important;
    padding: 24px 28px !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.06)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.22) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    backdrop-filter: blur(14px);

    color: #ffffff !important;

    text-align: center !important;

    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
}
/* ===== عنوان الإجابة الصحيحة - فك القفل ===== */

#secret-lock-status {
    width: fit-content !important;
    min-width: 430px !important;

    margin: 0 auto 18px !important;
    padding: 10px 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 205, 70, 0.22),
            rgba(255, 255, 255, 0.08)
        ) !important;

    border: 2px solid rgba(255, 211, 80, 0.75) !important;
    border-radius: 18px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 0 22px rgba(255, 205, 70, 0.12) !important;
}

.secret-lock-answer-label {
    color: #ffffff !important;
    font-size: 23px !important;
    font-weight: 900 !important;
}

.secret-lock-answer-number {
    color: #ffd45a !important;
    font-size: 36px !important;
    font-weight: 1000 !important;
    letter-spacing: 5px !important;

    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 0 18px rgba(255, 212, 90, 0.45);
}
/* ===== نتيجة فك القفل - تصميم جديد ===== */

#secret-lock-winner {
    width: min(760px, 90%) !important;
    margin: 10px auto 18px !important;
    padding: 14px 22px !important;

    text-align: center !important;

    font-size: 28px !important;
    font-weight: 900 !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.04)
        ) !important;

    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 18px !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.20) !important;
}


/* صندوق إجابات الفريقين */
#secret-lock-solution {
    width: min(820px, 92%) !important;

    margin: 0 auto !important;
    padding: 14px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* كل فريق بطاقة مستقلة */
.secret-lock-team-answer {
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 14px 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(38, 105, 190, 0.55),
            rgba(20, 51, 105, 0.75)
        );

    border:
        1px solid rgba(100, 220, 255, 0.38);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.12);

    color: #ffffff;

    animation:
        secretLockAnswerEnter
        0.55s ease both;
}


/* البطاقة الثانية تدخل بعد الأولى */
.secret-lock-team-answer:nth-child(2) {
    animation-delay: 0.12s;
}


/* اسم الفريق */
.secret-lock-team-answer span {
    font-size: 22px;
    font-weight: 900;
}


/* الرقم */
.secret-lock-team-answer strong {
    min-width: 92px;

    padding: 8px 16px;

    border-radius: 14px;

    color: #ffd45a;

    background:
        rgba(0,0,0,0.22);

    font-size: 32px;
    font-weight: 1000;

    letter-spacing: 4px;

    text-shadow:
        0 0 14px rgba(255,212,90,0.30);
}


/* حركة دخول البطاقات */
@keyframes secretLockAnswerEnter {

    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* زر العودة */
#secret-lock-return {
    margin: 16px auto 0 !important;

    min-width: 230px !important;

    border-radius: 16px !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    box-shadow:
        0 9px 20px rgba(0,0,0,0.24) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

#secret-lock-return:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 13px 28px rgba(0,0,0,0.30) !important;
}
/* ===== ضغط نتيجة فك القفل وإظهار زر العودة ===== */

/* جملة لا أحد فتح القفل */
#secret-lock-winner {
    margin: 4px auto 10px !important;
    padding: 8px 18px !important;

    font-size: 21px !important;
    line-height: 1.3 !important;

    color: #ff5b68 !important;

    min-height: 0 !important;
}


/* تصغير بطاقات إجابات الفريقين */
#secret-lock-solution {
    margin: 0 auto !important;
    padding: 8px !important;
    gap: 12px !important;
}

.secret-lock-team-answer {
    min-height: 70px !important;
    padding: 8px 15px !important;
}


/* تصغير اسم الفريق */
.secret-lock-team-answer span {
    font-size: 18px !important;
}


/* تصغير رقم إجابة الفريق */
.secret-lock-team-answer strong {
    min-width: 75px !important;
    padding: 6px 12px !important;

    font-size: 25px !important;
}


/* رفع زر العودة وإبقاؤه ظاهرًا */
#secret-lock-return {

    margin: 8px auto 0 !important;

    min-height: 42px !important;
    padding: 7px 24px !important;

    font-size: 18px !important;

    transform: translateY(-8px) !important;
}
/* ===== توضيح جملة لا أحد فتح القفل ===== */

#secret-lock-winner {
    font-size: 24px !important;
    font-weight: 1000 !important;

    color: #ff6b76 !important;

    background:
        rgba(255, 60, 80, 0.10) !important;

    border:
        1px solid rgba(255, 90, 105, 0.38) !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45) !important;

    letter-spacing: 0.2px !important;

    padding: 10px 20px !important;
}
/* =========================================================
   فئة: ولو جيت وجبتها
   تصميم مستقل بالكامل
========================================================= */

.bring-it-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow: hidden;

    background:
        radial-gradient(circle at 20% 20%, rgba(255, 154, 92, 0.18), transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(184, 92, 255, 0.18), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(42, 190, 255, 0.14), transparent 32%),
        linear-gradient(135deg, #0e1730 0%, #18152d 45%, #25162f 100%);
}

.bring-it-overlay.hidden {
    display: none !important;
}


/* =========================
   زخارف الخلفية
========================= */

.bring-it-overlay::before,
.bring-it-overlay::after {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    filter: blur(45px);
    opacity: 0.22;

    animation: bringItGlowFloat 8s ease-in-out infinite;
}

.bring-it-overlay::before {
    top: -70px;
    right: -40px;

    background: #ff9b59;
}

.bring-it-overlay::after {
    bottom: -80px;
    left: -40px;

    background: #8e59ff;

    animation-delay: 2s;
}


.bring-it-bg-shape {
    position: absolute;
    pointer-events: none;

    opacity: 0.16;

    animation: bringItFloat 7s ease-in-out infinite;
}

.bring-it-bg-shape::before {
    display: block;

    font-size: 56px;
}

.bring-it-bg-shape-1 {
    top: 12%;
    left: 7%;
}

.bring-it-bg-shape-1::before {
    content: "🔑";
}

.bring-it-bg-shape-2 {
    bottom: 12%;
    right: 8%;

    animation-delay: 1.4s;
}

.bring-it-bg-shape-2::before {
    content: "📚";
}

.bring-it-bg-shape-3 {
    top: 56%;
    left: 3%;

    animation-delay: 2.7s;
}

.bring-it-bg-shape-3::before {
    content: "🧦";
}


@keyframes bringItFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-16px) rotate(5deg);
    }
}


@keyframes bringItGlowFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(18px) scale(1.08);
    }
}


/* =========================
   الهيكل الرئيسي
========================= */

.bring-it-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 96vw);
    max-height: 94vh;

    overflow-y: auto;

    padding: 26px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 26, 52, 0.93),
            rgba(30, 22, 52, 0.92)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(16px);
}


/* =========================
   العنوان
========================= */

.bring-it-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-bottom: 20px;

    text-align: center;
}

.bring-it-title-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border-radius: 18px;

    font-size: 30px;

    background:
        linear-gradient(
            135deg,
            #ffb24d,
            #ff7d5e
        );

    box-shadow:
        0 12px 28px rgba(255, 133, 80, 0.3);

    animation: bringItSearchPulse 2.4s ease-in-out infinite;
}

.bring-it-header h2 {
    margin: 0;

    font-size: clamp(30px, 4vw, 48px);
    font-weight: 900;

    color: #ffffff;

    text-shadow:
        0 5px 18px rgba(0, 0, 0, 0.35);
}

.bring-it-header p {
    margin: 5px 0 0;

    font-size: 17px;
    color: #d8d9ef;
}


@keyframes bringItSearchPulse {
    0%,
    100% {
        transform: rotate(-4deg) scale(1);
    }

    50% {
        transform: rotate(5deg) scale(1.08);
    }
}


/* =========================
   المراحل
========================= */

.bring-it-stage {
    animation: bringItStageIn 0.45s ease;
}

.bring-it-stage.hidden {
    display: none !important;
}

@keyframes bringItStageIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================
   شاشة مشاهدة الصورة
========================= */

.bring-it-watch-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 16px;
}

.bring-it-focus-badge {
    padding: 12px 18px;

    border-radius: 18px;

    font-size: 18px;
    font-weight: 800;

    color: #fff7e8;

    background:
        linear-gradient(
            135deg,
            rgba(255, 162, 70, 0.22),
            rgba(255, 113, 93, 0.2)
        );

    border: 1px solid rgba(255, 183, 92, 0.35);
}

.bring-it-watch-timer {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;

    border-radius: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(90, 96, 255, 0.28),
            rgba(170, 80, 255, 0.22)
        );

    border: 1px solid rgba(145, 137, 255, 0.35);
}

.bring-it-watch-timer strong {
    min-width: 46px;

    font-size: 34px;
    line-height: 1;

    color: #ffd876;
}

.bring-it-watch-timer span,
.bring-it-watch-timer small {
    font-weight: 700;
    color: #e5e6ff;
}


/* =========================
   إطار الصورة
========================= */

.bring-it-image-frame {
    position: relative;

    width: 100%;
    min-height: 420px;

    overflow: hidden;

    border-radius: 26px;

    border: 2px solid rgba(255, 255, 255, 0.13);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.32),
        0 0 0 6px rgba(255, 255, 255, 0.018);
}

.bring-it-image-frame img {
    display: block;

    width: 100%;
    height: min(58vh, 560px);

    object-fit: contain;

    background: #11172b;
}

.bring-it-image-frame::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03),
            transparent 18%,
            transparent 82%,
            rgba(255, 255, 255, 0.03)
        );
}

.bring-it-scan-line {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    top: -6px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 115, 0.8),
            #ffffff,
            rgba(255, 215, 115, 0.8),
            transparent
        );

    box-shadow:
        0 0 18px rgba(255, 224, 130, 0.75);

    animation: bringItScan 3.2s linear infinite;
}

@keyframes bringItScan {
    from {
        top: 0;
    }

    to {
        top: 100%;
    }
}

.bring-it-watch-hint {
    margin: 16px 0 0;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #d9dcf5;
}


/* =========================
   شاشة سؤال الأم
========================= */

.bring-it-mom-area {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-top: 12px;
}

.bring-it-mom-character {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 180px;
}

.bring-it-mom-face {
    display: grid;
    place-items: center;

    width: 150px;
    height: 150px;

    border-radius: 50% 50% 44% 44%;

    font-size: 92px;

    background:
        radial-gradient(
            circle at 50% 35%,
            #ffe0ca 0%,
            #ffd3b4 58%,
            #f0ab87 100%
        );

    border: 5px solid rgba(255, 255, 255, 0.17);

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.28),
        0 0 30px rgba(255, 128, 117, 0.14);

    animation: bringItMomMove 2.7s ease-in-out infinite;
}

.bring-it-mom-label {
    margin-top: -6px;

    padding: 7px 16px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 900;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ff7b8e,
            #b65cff
        );

    box-shadow:
        0 8px 20px rgba(190, 90, 220, 0.28);
}

@keyframes bringItMomMove {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(-2deg);
    }
}


/* =========================
   فقاعة الكلام
========================= */

.bring-it-speech-bubble {
    position: relative;

    width: min(650px, 68vw);

    padding: 30px 36px;

    border-radius: 30px;

    text-align: center;

    background:
        linear-gradient(
            160deg,
            #fffaf4,
            #fff2e7
        );

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.25),
        0 0 0 5px rgba(255, 255, 255, 0.05);

    animation: bringItBubblePop 0.5s ease;
}

.bring-it-speech-bubble::after {
    content: "";

    position: absolute;

    right: -28px;
    top: 50%;

    transform: translateY(-50%);

    width: 0;
    height: 0;

    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid #fff5eb;
}

.bring-it-speech-small {
    display: block;

    margin-bottom: 5px;

    font-size: 22px;
    font-weight: 900;

    color: #b85d92;
}

.bring-it-speech-bubble h2 {
    margin: 0;

    font-size: clamp(30px, 4vw, 48px);
    font-weight: 950;

    color: #5d315c;
}

.bring-it-speech-bubble p {
    margin: 10px 0 0;

    font-size: 20px;
    font-weight: 800;

    color: #805877;
}

@keyframes bringItBubblePop {
    from {
        opacity: 0;
        transform: scale(0.82);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================
   مؤقت التفكير
========================= */

.bring-it-answer-timer {
    width: 150px;
    height: 150px;

    margin: 26px auto 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
        radial-gradient(
            circle,
            #24264b 55%,
            #151a35 57%
        );

    border: 7px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 5px rgba(105, 104, 255, 0.11),
        0 18px 38px rgba(0, 0, 0, 0.3);
}

.bring-it-answer-timer-title {
    font-size: 14px;
    font-weight: 800;

    color: #c9c8ef;
}

.bring-it-answer-timer strong {
    font-size: 50px;
    line-height: 1.05;

    color: #ffd976;
}

.bring-it-answer-timer > span:last-child {
    font-size: 14px;
    font-weight: 700;

    color: #c9c8ef;
}


/* =========================
   تذكير الفريقين
========================= */

.bring-it-team-thinking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    margin: 18px 0;

    font-size: 17px;
    font-weight: 800;

    color: #dfe0f7;
}

.bring-it-thinking-dots {
    letter-spacing: 7px;

    color: #ffce65;

    animation: bringItDots 1.2s ease-in-out infinite;
}

@keyframes bringItDots {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}


/* =========================
   زر إظهار الإجابة
========================= */

.bring-it-show-answer {
    display: block;

    min-width: 250px;

    margin: 22px auto 0;

    padding: 15px 30px;

    border: 0;
    border-radius: 18px;

    cursor: pointer;

    font-size: 19px;
    font-weight: 900;

    color: white;

    background:
        linear-gradient(
            135deg,
            #7659ff,
            #b14cff
        );

    box-shadow:
        0 14px 30px rgba(132, 79, 255, 0.32);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.bring-it-show-answer:hover {
    transform: translateY(-3px) scale(1.02);

    box-shadow:
        0 18px 38px rgba(132, 79, 255, 0.42);

    filter: brightness(1.08);
}

.bring-it-show-answer:active {
    transform: translateY(0) scale(0.98);
}


/* =========================
   شاشة الإجابة
========================= */

.bring-it-answer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    margin-bottom: 16px;

    color: white;
}

.bring-it-answer-heading > span {
    font-size: 30px;

    animation: bringItSparkle 1.6s ease-in-out infinite;
}

.bring-it-answer-heading small {
    display: block;

    text-align: center;

    color: #c8c9e5;

    font-size: 15px;
    font-weight: 700;
}

.bring-it-answer-heading h2 {
    margin: 2px 0 0;

    font-size: 34px;
    font-weight: 950;

    color: #ffd66f;
}

@keyframes bringItSparkle {
    0%,
    100% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15) rotate(12deg);
        opacity: 1;
    }
}


/* =========================
   علامة مكان العنصر
========================= */

.bring-it-answer-frame {
    overflow: hidden;
}

.bring-it-target-marker {
    position: absolute;
    z-index: 8;

    width: 84px;
    height: 84px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 5px solid #ffd73d;
    border-radius: 50%;

    box-shadow:
        0 0 0 7px rgba(255, 215, 61, 0.18),
        0 0 28px rgba(255, 215, 61, 0.85);

    pointer-events: none;

    animation: bringItMarkerPulse 1.1s ease-in-out infinite;
}

.bring-it-target-marker::before,
.bring-it-target-marker::after {
    content: "";

    position: absolute;

    background: #ffd73d;

    box-shadow:
        0 0 10px rgba(255, 215, 61, 0.8);
}

.bring-it-target-marker::before {
    width: 110px;
    height: 2px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

.bring-it-target-marker::after {
    width: 2px;
    height: 110px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

.bring-it-target-marker span {
    position: absolute;

    inset: -12px;

    border: 2px solid rgba(255, 231, 102, 0.65);
    border-radius: 50%;

    animation: bringItMarkerRing 1.4s ease-out infinite;
}

@keyframes bringItMarkerPulse {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}

@keyframes bringItMarkerRing {
    from {
        opacity: 0.9;
        transform: scale(0.8);
    }

    to {
        opacity: 0;
        transform: scale(1.45);
    }
}


.bring-it-answer-description {
    margin: 15px 0 20px;

    text-align: center;

    font-size: 18px;
    font-weight: 800;

    color: #e1e2f3;
}


/* =========================
   التحكيم
========================= */

.bring-it-judge-title {
    margin: 18px 0 14px;

    text-align: center;

    font-size: 20px;
    font-weight: 900;

    color: #ffffff;
}

.bring-it-judge-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;
}

.bring-it-judge-button {
    min-width: 190px;

    padding: 14px 24px;

    border: 0;
    border-radius: 18px;

    cursor: pointer;

    font-size: 18px;
    font-weight: 900;

    color: white;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.bring-it-judge-button:hover {
    transform: translateY(-3px);

    filter: brightness(1.08);
}

.bring-it-team1 {
    background:
        linear-gradient(
            135deg,
            #2187ff,
            #2958d8
        );

    box-shadow:
        0 12px 28px rgba(38, 117, 255, 0.28);
}

.bring-it-team2 {
    background:
        linear-gradient(
            135deg,
            #ff4c88,
            #c7336c
        );

    box-shadow:
        0 12px 28px rgba(255, 70, 129, 0.26);
}

.bring-it-none {
    background:
        linear-gradient(
            135deg,
            #595c73,
            #3f4258
        );

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18);
}


/* =========================
   استجابة للشاشات الصغيرة
========================= */

@media (max-width: 850px) {

    .bring-it-shell {
        padding: 18px;
    }

    .bring-it-watch-top {
        flex-direction: column;
    }

    .bring-it-mom-area {
        flex-direction: column;
    }

    .bring-it-speech-bubble {
        width: 100%;
    }

    .bring-it-speech-bubble::after {
        display: none;
    }

    .bring-it-image-frame {
        min-height: 300px;
    }

    .bring-it-image-frame img {
        height: min(50vh, 430px);
    }

    .bring-it-team-thinking {
        flex-direction: column;
        gap: 8px;
    }

    .bring-it-judge-button {
        min-width: 160px;
    }
}
/* ==========================================
   ولو جيت وجبتها - المؤقت واسم الفريق
========================================== */

.bring-it-answer-timer {
    position: fixed;
    top: 22px;
    left: 24px;
    z-index: 10001;

    width: 150px;
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 14px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 31, 58, 0.96),
            rgba(43, 30, 68, 0.96)
        );

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(12px);
}

.bring-it-answer-timer-title {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.8;
    margin-bottom: 3px;
}

#bring-it-answer-time {
    font-size: 46px;
    line-height: 1;
    font-weight: 900;
}

.bring-it-answer-timer > span:last-of-type {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 3px;
}

.bring-it-current-team {
    width: calc(100% + 10px);

    margin-top: 12px;
    padding: 8px 6px;

    text-align: center;

    font-size: 14px;
    font-weight: 900;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
/* ==========================================
   ولو جيت وجبتها - بدون سكرول + حجم شاشة مناسب
========================================== */

.bring-it-overlay {
    overflow: hidden !important;
    padding: 10px !important;
}

.bring-it-shell {
    width: min(1050px, calc(100vw - 40px)) !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;

    padding: 14px 22px !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}

.bring-it-header {
    flex-shrink: 0;
    margin-bottom: 8px !important;
}

.bring-it-header h2 {
    font-size: 25px !important;
    margin: 0 !important;
}

.bring-it-header p {
    font-size: 13px !important;
    margin: 2px 0 0 !important;
}

.bring-it-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden !important;
}

/* صورة مرحلة الحفظ */
.bring-it-image-frame {
    max-height: 62vh !important;
}

.bring-it-image-frame img {
    max-height: 62vh !important;
    object-fit: contain !important;
}

/* مرحلة طلب الأم */
#bring-it-question-stage {
    justify-content: center !important;
    gap: 12px !important;
}

.bring-it-mom-area {
    margin: 0 auto !important;
    transform: scale(0.9);
    transform-origin: center;
}

.bring-it-speech-bubble {
    padding: 16px 24px !important;
}

.bring-it-speech-bubble h2 {
    font-size: 27px !important;
}

/* مرحلة الإجابة */
#bring-it-answer-stage {
    gap: 8px !important;
}

.bring-it-answer-heading {
    margin-bottom: 4px !important;
}

.bring-it-answer-frame {
    max-height: 54vh !important;
}

.bring-it-answer-frame img {
    max-height: 54vh !important;
}

.bring-it-answer-description {
    margin: 5px 0 !important;
}

.bring-it-judge-title {
    margin: 4px 0 !important;
}

.bring-it-judge-buttons {
    margin-top: 4px !important;
    gap: 10px !important;
}

.bring-it-judge-button {
    padding: 11px 20px !important;
}
/* ==========================================
   ولو جيت وجبتها - تحذير آخر 5 ثواني
========================================== */

.bring-it-answer-timer.is-warning {
    border: 2px solid rgba(255, 80, 80, 0.9);

    box-shadow:
        0 0 0 4px rgba(255, 80, 80, 0.12),
        0 0 28px rgba(255, 60, 60, 0.5),
        0 16px 35px rgba(0, 0, 0, 0.32);

    animation:
        bringItTimerDangerPulse
        0.7s
        ease-in-out
        infinite;
}

.bring-it-answer-timer.is-warning #bring-it-answer-time {
    color: #ff4d4d;
}

@keyframes bringItTimerDangerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}
/* ==========================================
   ولو جيت وجبتها - تنبيه انتقال الدور
========================================== */

.bring-it-current-team.is-switching {
    animation:
        bringItTeamSwitchFlash
        0.8s
        ease;
}

@keyframes bringItTeamSwitchFlash {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.12);
        box-shadow:
            0 0 24px rgba(255, 210, 90, 0.75);
    }

    100% {
        transform: scale(1);
    }
}
/* ==========================================
   ولو جيت وجبتها - إعادة بناء هيكل الشاشة
========================================== */

.bring-it-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(114, 82, 255, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(255, 88, 160, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 55% 85%,
            rgba(255, 177, 66, 0.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #080b18 0%,
            #11162a 46%,
            #19122c 100%
        ) !important;
}


/* نشيل شكل النافذة الصغيرة القديمة */
.bring-it-shell {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding:
        90px
        60px
        34px
        60px !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    z-index: 2;
}


/* الرأس لا يغطي الشاشة */
.bring-it-header {
    position: relative !important;

    width: fit-content;

    margin:
        0
        auto
        18px !important;

    padding:
        8px
        20px !important;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    backdrop-filter: blur(10px);
}


/* المؤقت فوق يسار الشاشة فعليًا */
.bring-it-answer-timer {
    position: fixed !important;

    top: 24px !important;
    left: 26px !important;

    width: 145px !important;
    min-height: 145px !important;

    z-index: 10020 !important;

    margin: 0 !important;
}


/* نضمن أن المحتوى لا يدخل تحت المؤقت */
#bring-it-question-stage,
#bring-it-answer-stage {
    padding-top: 16px !important;
}


/* المراحل نفسها شفافة بدون صندوق ثقيل */
.bring-it-stage {
    position: relative !important;

    width: 100% !important;

    background: transparent !important;

    border: none !important;
    box-shadow: none !important;

    overflow: visible !important;
}


/* المؤثرات الخلفية تبقى ظاهرة */
.bring-it-bg-shape {
    z-index: 1 !important;
    opacity: 0.65 !important;
}


/* المحتوى فوق المؤثرات */
.bring-it-header,
.bring-it-stage {
    z-index: 3 !important;
}
/* ==========================================
   ولو جيت وجبتها - تطوير إطار الصورة
========================================== */

/* إخفاء خط المسح القديم نهائيًا */
.bring-it-scan-line {
    display: none !important;
}


/* الإطار الرئيسي للصورة */
.bring-it-image-frame {
    position: relative !important;

    width: min(920px, 78vw) !important;
    height: min(560px, 62vh) !important;

    margin:
        0
        auto !important;

    padding: 10px !important;

    border-radius: 30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.025)
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.14) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset,
        0 0 60px rgba(111, 83, 255, 0.08) !important;

    backdrop-filter:
        blur(14px);

    overflow: hidden !important;
}


/* الصورة نفسها */
.bring-it-image-frame img {
    width: 100% !important;
    height: 100% !important;

    max-height: none !important;

    object-fit: contain !important;

    display: block !important;

    border-radius: 22px !important;

    background:
        rgba(0, 0, 0, 0.16);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}


/* توهج خفيف خلف إطار الصورة */
.bring-it-image-frame::before {
    content: '';

    position: absolute;
    inset: -40px;

    background:
        radial-gradient(
            circle,
            rgba(123, 92, 255, 0.18),
            transparent 62%
        );

    filter: blur(28px);

    z-index: -1;

    pointer-events: none;
}


/* لمعة هادئة جدًا على الحواف */
.bring-it-image-frame::after {
    content: '';

    position: absolute;
    inset: 0;

    border-radius: 30px;

    box-shadow:
        inset 0 0 35px rgba(255, 255, 255, 0.025);

    pointer-events: none;
}
/* ==========================================
   ولو جيت وجبتها
   إصلاح شاشة مشاهدة الصورة
========================================== */

#bring-it-watch-stage {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;

    gap: 10px !important;

    height: 100% !important;
    min-height: 0 !important;

    padding: 0 30px 18px !important;

    overflow: hidden !important;
}


/* الشريط العلوي */
.bring-it-watch-top {
    width: min(1180px, calc(100vw - 100px)) !important;

    margin: 0 auto 4px !important;

    flex-shrink: 0 !important;
}


/* الإطار يأخذ المساحة الحقيقية المتبقية */
#bring-it-watch-stage .bring-it-image-frame {
    width: min(
        1080px,
        calc(100vw - 150px)
    ) !important;

    height: calc(100vh - 285px) !important;

    min-height: 330px !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding: 8px !important;

    flex: 1 1 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 28px !important;
}


/* الصورة كاملة دائماً بدون قص */
#bring-it-watch-stage .bring-it-image-frame img {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 20px !important;
}


/* النص السفلي لا يطرد الصورة خارج الشاشة */
.bring-it-watch-hint {
    flex-shrink: 0 !important;

    margin: 4px 0 0 !important;

    font-size: 14px !important;
}
/* ==========================================
   ولو جيت وجبتها - خلفية متحركة احترافية
========================================== */

/* إلغاء البقع القديمة */
.bring-it-bg-shape {
    display: none !important;
}


/* عناصر الخلفية الجديدة */
.bring-it-overlay::before,
.bring-it-overlay::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}


/* طبقة رموز متحركة */
.bring-it-overlay::before {
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255, 184, 77, 0.14) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 18%, rgba(255, 102, 171, 0.12) 0 5px, transparent 6px),
        radial-gradient(circle at 25% 78%, rgba(118, 95, 255, 0.12) 0 5px, transparent 6px),
        radial-gradient(circle at 78% 72%, rgba(255, 184, 77, 0.10) 0 4px, transparent 5px);

    animation:
        bringItBackgroundDrift
        18s
        ease-in-out
        infinite alternate;
}


/* طبقة توهج متحرك */
.bring-it-overlay::after {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(111, 89, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 24%,
            rgba(255, 105, 160, 0.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 62% 82%,
            rgba(255, 184, 77, 0.08),
            transparent 24%
        );

    animation:
        bringItGlowMove
        12s
        ease-in-out
        infinite alternate;
}


/* حركة ناعمة */
@keyframes bringItBackgroundDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(18px, -14px, 0);
    }
}

@keyframes bringItGlowMove {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* ==========================================
   عناصر عائمة تدل على الفئة
========================================== */

.bring-it-shell::before {
    content:
        '🔑        📕        🎮        🧦        🔍        🧸';

    position: fixed;

    top: 13%;
    left: 6%;

    width: 88%;

    font-size: 34px;

    letter-spacing: 52px;

    opacity: 0.14;

    white-space: nowrap;

    pointer-events: none;

    z-index: 1;

    filter: blur(0.2px);

    animation:
        bringItObjectsFloat
        16s
        ease-in-out
        infinite alternate;
}


.bring-it-shell::after {
    content:
        '📚        🗝️        🕹️        🪀        📦        🧩';

    position: fixed;

    bottom: 9%;
    left: 9%;

    width: 82%;

    font-size: 30px;

    letter-spacing: 46px;

    opacity: 0.10;

    white-space: nowrap;

    pointer-events: none;

    z-index: 1;

    animation:
        bringItObjectsFloatSecond
        19s
        ease-in-out
        infinite alternate;
}


@keyframes bringItObjectsFloat {
    0% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    100% {
        transform:
            translateY(-22px)
            rotate(2deg);
    }
}


@keyframes bringItObjectsFloatSecond {
    0% {
        transform:
            translateY(0)
            rotate(1deg);
    }

    100% {
        transform:
            translateY(18px)
            rotate(-2deg);
    }
}
/* ==========================================
   ولو جيت وجبتها
   إعادة تصميم شاشة طلب ماما بالكامل
========================================== */

#bring-it-question-stage {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding:
        40px
        210px
        55px
        210px !important;

    gap: 28px !important;

    overflow: visible !important;
}


/* المجموعة كاملة */
.bring-it-mom-area {
    position: relative !important;

    width: min(850px, 70vw) !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 28px !important;

    transform: none !important;
}


/* ==========================================
   شخصية ماما
========================================== */

.bring-it-mom-character {
    position: relative !important;

    width: 150px !important;
    height: 180px !important;

    flex: 0 0 150px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 42px !important;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 190, 115, 0.30),
            rgba(255, 115, 145, 0.10) 52%,
            transparent 72%
        ) !important;

    border:
        1px solid
        rgba(255, 205, 140, 0.18) !important;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.30),
        0 0 50px rgba(255, 131, 110, 0.13) !important;

    animation:
        bringItMomFloat
        3.8s
        ease-in-out
        infinite;
}


/* هالة خلف ماما */
.bring-it-mom-character::before {
    content: '';

    position: absolute;

    width: 210px;
    height: 210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 173, 91, 0.17),
            transparent 68%
        );

    z-index: -1;

    animation:
        bringItMomGlow
        2.8s
        ease-in-out
        infinite alternate;
}


.bring-it-mom-face {
    font-size: 82px !important;
    line-height: 1 !important;

    filter:
        drop-shadow(
            0 10px 14px
            rgba(0, 0, 0, 0.25)
        );
}


.bring-it-mom-label {
    margin-top: 10px !important;

    padding:
        6px
        18px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #ff8b70,
            #e95aa5
        ) !important;

    color: white !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    box-shadow:
        0 8px 20px
        rgba(233, 90, 165, 0.25);
}


/* ==========================================
   بطاقة الطلب
========================================== */

.bring-it-speech-bubble {
    position: relative !important;

    width: min(620px, 55vw) !important;
    min-height: 220px !important;

    padding:
        30px
        42px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    border-radius: 34px !important;

    background:
        linear-gradient(
            145deg,
            rgba(35, 38, 72, 0.92),
            rgba(48, 29, 67, 0.92)
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.13) !important;

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.36),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08) !important;

    backdrop-filter:
        blur(20px) !important;

    color: white !important;

    animation:
        bringItRequestEnter
        0.55s
        cubic-bezier(.2,.8,.2,1);
}


/* سهم الكلام */
.bring-it-speech-bubble::after {
    content: '';

    position: absolute;

    right: -18px;
    top: 50%;

    width: 36px;
    height: 36px;

    background:
        #302044;

    transform:
        translateY(-50%)
        rotate(45deg);

    border-radius: 5px;

    z-index: -1;
}


/* كلمة طيب */
.bring-it-speech-small {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    margin-bottom: 12px !important;

    padding:
        5px
        15px !important;

    border-radius: 999px;

    background:
        rgba(255, 168, 91, 0.11);

    border:
        1px solid
        rgba(255, 180, 100, 0.20);

    color:
        #ffc16f !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;
}


/* الطلب نفسه */
.bring-it-speech-bubble h2 {
    margin:
        0
        0
        14px !important;

    color:
        #ffffff !important;

    font-size:
        clamp(
            28px,
            3vw,
            42px
        ) !important;

    line-height:
        1.35 !important;

    font-weight:
        900 !important;

    text-shadow:
        0 5px 22px
        rgba(0, 0, 0, 0.25);
}


/* وين كان موجود؟ */
.bring-it-speech-bubble p {
    margin: 0 !important;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        ) !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;
}


/* ==========================================
   زر أروح أجيبها
========================================== */

.bring-it-show-answer {
    position: relative !important;

    min-width: 270px !important;

    padding:
        16px
        32px !important;

    margin:
        6px
        auto
        0 !important;

    border: 0 !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            135deg,
            #7657ff,
            #bd42f5
        ) !important;

    color:
        white !important;

    font-size:
        19px !important;

    font-weight:
        900 !important;

    box-shadow:
        0 15px 35px
        rgba(130, 73, 255, 0.30),
        inset 0 1px 0
        rgba(255,255,255,0.25) !important;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


.bring-it-show-answer:hover {
    transform:
        translateY(-4px)
        scale(1.025);

    box-shadow:
        0 22px 45px
        rgba(130, 73, 255, 0.42),
        inset 0 1px 0
        rgba(255,255,255,0.28) !important;
}


@keyframes bringItMomFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }
}


@keyframes bringItMomGlow {

    from {
        transform:
            scale(0.92);

        opacity:
            0.65;
    }

    to {
        transform:
            scale(1.08);

        opacity:
            1;
    }
}


@keyframes bringItRequestEnter {

    from {
        opacity: 0;

        transform:
            translateX(-25px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}
/* ==========================================
   ولو جيت وجبتها
   إعادة تصميم شاشة الإجابة
========================================== */

#bring-it-answer-stage {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    padding:
        10px
        60px
        26px !important;

    gap: 10px !important;

    overflow: hidden !important;
}


/* عنوان الإجابة */
.bring-it-answer-heading {
    flex-shrink: 0 !important;

    margin: 0 auto 4px !important;

    padding:
        8px
        20px !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.10) !important;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,0.20) !important;
}


.bring-it-answer-heading h2 {
    margin: 0 !important;

    font-size:
        clamp(
            24px,
            2.5vw,
            34px
        ) !important;

    color:
        #ffffff !important;
}


.bring-it-answer-heading small {
    color:
        #ffc66f !important;

    font-weight:
        800 !important;
}


/* ==========================================
   إطار صورة الإجابة
========================================== */

#bring-it-answer-stage .bring-it-answer-frame {
    position: relative !important;

    width:
        min(
            980px,
            calc(100vw - 180px)
        ) !important;

    height:
        calc(100vh - 330px) !important;

    min-height:
        300px !important;

    max-height:
        none !important;

    flex:
        1 1 auto !important;

    margin:
        0
        auto !important;

    padding:
        8px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.025)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.13) !important;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.38),
        0 0 55px
        rgba(110,80,255,0.08) !important;

    overflow:
        hidden !important;
}


/* الصورة كاملة بدون قص */
#bring-it-answer-stage .bring-it-answer-frame img {
    width:
        100% !important;

    height:
        100% !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    border-radius:
        20px !important;

    display:
        block !important;

    background:
        rgba(0,0,0,0.16);
}


/* ==========================================
   علامة مكان العنصر
========================================== */

.bring-it-target-marker {
    width:
        74px !important;

    height:
        74px !important;

    border:
        4px solid
        #ffd469 !important;

    border-radius:
        50% !important;

    box-shadow:
        0 0 0 8px
        rgba(255,212,105,0.15),
        0 0 30px
        rgba(255,190,70,0.95),
        0 0 60px
        rgba(255,160,60,0.45) !important;

    background:
        rgba(255,190,70,0.08) !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    animation:
        bringItTargetPulseNew
        1.1s
        ease-in-out
        infinite !important;
}


.bring-it-target-marker span {
    position:
        absolute;

    inset:
        50%
        auto
        auto
        50%;

    width:
        14px;

    height:
        14px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    background:
        #ffd469;

    box-shadow:
        0 0 16px
        rgba(255,210,90,0.95);
}


@keyframes bringItTargetPulseNew {

    0%,
    100% {
        scale: 1;
        opacity: 1;
    }

    50% {
        scale: 1.12;
        opacity: 0.82;
    }
}


/* ==========================================
   وصف الإجابة
========================================== */

.bring-it-answer-description {
    flex-shrink:
        0 !important;

    margin:
        2px
        0 !important;

    padding:
        8px
        20px !important;

    border-radius:
        14px !important;

    background:
        rgba(255,255,255,0.055);

    border:
        1px solid
        rgba(255,255,255,0.08);

    color:
        rgba(255,255,255,0.88) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;
}


/* عنوان التحكيم */
.bring-it-judge-title {
    flex-shrink:
        0 !important;

    margin:
        2px
        0 0 !important;

    color:
        rgba(255,255,255,0.78) !important;

    font-size:
        15px !important;

    font-weight:
        900 !important;
}


/* ==========================================
   أزرار التحكيم
========================================== */

.bring-it-judge-buttons {
    flex-shrink:
        0 !important;

    width:
        min(
            720px,
            80vw
        ) !important;

    margin:
        0
        auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        14px !important;
}


.bring-it-judge-button {
    flex:
        1 1 0 !important;

    min-width:
        0 !important;

    padding:
        12px
        18px !important;

    border-radius:
        16px !important;

    border:
        1px solid
        rgba(255,255,255,0.11) !important;

    color:
        white !important;

    font-size:
        16px !important;

    font-weight:
        900 !important;

    cursor:
        pointer !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


.bring-it-team1 {
    background:
        linear-gradient(
            135deg,
            #6d5cff,
            #4636d7
        ) !important;
}


.bring-it-none {
    background:
        linear-gradient(
            135deg,
            #4b5166,
            #313646
        ) !important;
}


.bring-it-team2 {
    background:
        linear-gradient(
            135deg,
            #ff5f82,
            #c8436b
        ) !important;
}


.bring-it-judge-button:hover {
    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 14px 28px
        rgba(0,0,0,0.28);
}
/* ==========================================
   bring-it
   عزل المراحل ومنع تداخل العناصر
========================================== */

#bring-it-watch-stage.hidden,
#bring-it-question-stage.hidden,
#bring-it-answer-stage.hidden {
    display: none !important;
}

/* شاشة المشاهدة فقط */
#bring-it-watch-stage:not(.hidden) {
    display: flex !important;
}

/* شاشة السؤال فقط */
#bring-it-question-stage:not(.hidden) {
    display: flex !important;
}

/* شاشة الإجابة فقط */
#bring-it-answer-stage:not(.hidden) {
    display: flex !important;
}

/* المؤقت لا يظهر أثناء مشاهدة الصورة */
#bring-it-watch-stage:not(.hidden)
~ #bring-it-question-stage.hidden
.bring-it-answer-timer {
    display: none !important;
}

/* عنوان الإجابة وكل عناصرها لا تظهر قبل مرحلة الإجابة */
#bring-it-answer-stage.hidden .bring-it-answer-heading,
#bring-it-answer-stage.hidden .bring-it-answer-frame,
#bring-it-answer-stage.hidden .bring-it-answer-description,
#bring-it-answer-stage.hidden .bring-it-judge-title,
#bring-it-answer-stage.hidden .bring-it-judge-buttons {
    display: none !important;
}

/* عناصر السؤال لا تظهر خارج مرحلة السؤال */
#bring-it-question-stage.hidden .bring-it-mom-area,
#bring-it-question-stage.hidden .bring-it-answer-timer,
#bring-it-question-stage.hidden .bring-it-show-answer {
    display: none !important;
}
/* ==========================================
   ولو جيت وجبتها
   إخفاء مؤقت الإجابة خارج مرحلة السؤال
========================================== */

#bring-it-question-stage.hidden
.bring-it-answer-timer {
    display: none !important;
}

#bring-it-question-stage:not(.hidden)
.bring-it-answer-timer {
    display: flex !important;
}
/* ==========================================
   ولو جيت وجبتها
   الصفحة الأولى - الصورة هي العنصر الرئيسي
========================================== */

/* نخفي صندوق وقت المشاهدة الكبير */
.bring-it-watch-top {
    position: absolute !important;
    top: 18px !important;
    left: 22px !important;

    width: auto !important;
    margin: 0 !important;

    z-index: 20 !important;
}


/* نخلي مؤقت المشاهدة صغير ومعلق */
.bring-it-watch-timer {
    min-width: 110px !important;

    padding: 8px 14px !important;

    border-radius: 16px !important;

    background:
        rgba(18, 20, 42, 0.82) !important;

    backdrop-filter: blur(12px) !important;
}


/* نص ركزوا بالتفاصيل يصغر */
.bring-it-focus-badge {
    display: none !important;
}


/* نخلي مرحلة المشاهدة تستغل الشاشة */
#bring-it-watch-stage {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    padding:
        20px
        30px
        20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/* هذا هو المهم: تكبير الصورة فعلياً */
#bring-it-watch-stage .bring-it-image-frame {
    width:
        calc(100vw - 90px) !important;

    height:
        calc(100vh - 145px) !important;

    max-width:
        none !important;

    max-height:
        none !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        6px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* الصورة نفسها تأخذ كامل المساحة */
#bring-it-watch-stage .bring-it-image-frame img {
    width:
        100% !important;

    height:
        100% !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    border-radius:
        18px !important;
}


/* إخفاء النص السفلي لأنه يأخذ مساحة */
.bring-it-watch-hint {
    display: none !important;
}
/* ==========================================
   ولو جيت وجبتها
   إخفاء مؤقت المشاهدة بالكامل
========================================== */

.bring-it-watch-timer {
    display: none !important;
}
/* =====================================================
   ولو جيت وجبتها
   توسيط كامل لشاشة السؤال + خلفية احترافية
===================================================== */

#bring-it-question-stage {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 40px 180px 45px !important;
    gap: 22px !important;

    text-align: center !important;
}


/* =====================================================
   مجموعة ماما + السؤال
===================================================== */

#bring-it-question-stage .bring-it-mom-area {
    position: relative !important;

    width: min(760px, 68vw) !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    transform: none !important;
}


/* =====================================================
   ماما في المنتصف
===================================================== */

#bring-it-question-stage .bring-it-mom-character {
    position: relative !important;

    width: 112px !important;
    height: 112px !important;

    flex: none !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 195, 125, 0.32),
            rgba(255, 106, 151, 0.12) 55%,
            transparent 72%
        ) !important;

    border:
        1px solid rgba(255, 196, 145, 0.22) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 0 45px rgba(255, 126, 107, 0.18) !important;
}


#bring-it-question-stage .bring-it-mom-face {
    font-size: 62px !important;
}


#bring-it-question-stage .bring-it-mom-label {
    position: absolute !important;

    bottom: -12px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    white-space: nowrap !important;
}


/* =====================================================
   بطاقة الطلب في منتصف الشاشة
===================================================== */

#bring-it-question-stage .bring-it-speech-bubble {
    position: relative !important;

    width: min(720px, 64vw) !important;
    min-height: 180px !important;

    margin: 12px auto 0 !important;

    padding: 26px 45px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    border-radius: 30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(36, 38, 77, 0.82),
            rgba(52, 31, 75, 0.76)
        ) !important;

    border:
        1px solid rgba(255, 255, 255, 0.13) !important;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 55px rgba(125, 82, 255, 0.10) !important;

    backdrop-filter: blur(22px) !important;
}


/* نحذف سهم الكلام الجانبي القديم */
#bring-it-question-stage .bring-it-speech-bubble::after {
    display: none !important;
}


/* كلمة طيب */
#bring-it-question-stage .bring-it-speech-small {
    margin: 0 0 8px !important;

    color: #ffc56f !important;

    font-size: 15px !important;
    font-weight: 900 !important;
}


/* الطلب */
#bring-it-question-stage .bring-it-speech-bubble h2 {
    margin: 0 !important;

    font-size: clamp(32px, 3.4vw, 48px) !important;
    line-height: 1.3 !important;

    color: #ffffff !important;

    text-align: center !important;
}


/* وين كان موجود */
#bring-it-question-stage .bring-it-speech-bubble p {
    margin: 10px 0 0 !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    color: rgba(255, 255, 255, 0.62) !important;

    text-align: center !important;
}


/* =====================================================
   زر أروح أجيبها - منتصف الشاشة
===================================================== */

#bring-it-question-stage .bring-it-show-answer {
    position: relative !important;

    display: block !important;

    width: auto !important;
    min-width: 280px !important;

    margin: 4px auto 0 !important;

    padding: 15px 32px !important;

    text-align: center !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            #745cff,
            #b83df2
        ) !important;

    box-shadow:
        0 16px 38px rgba(126, 74, 255, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.24) !important;
}


/* =====================================================
   خلفية أكثر احترافية
===================================================== */

.bring-it-overlay {
    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(102, 70, 190, 0.20) 0%,
            transparent 38%
        ),
        radial-gradient(
            circle at 8% 18%,
            rgba(73, 104, 255, 0.17),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 22%,
            rgba(255, 94, 133, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 92%,
            rgba(255, 157, 67, 0.09),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #080d20 0%,
            #11152f 42%,
            #21142f 72%,
            #321927 100%
        ) !important;
}


/* إضاءة ناعمة خلف منتصف المحتوى */
#bring-it-question-stage::before {
    content: '';

    position: absolute !important;

    width: 760px !important;
    height: 460px !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(124, 86, 255, 0.13),
            rgba(255, 91, 150, 0.045) 45%,
            transparent 72%
        ) !important;

    filter: blur(30px) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}
/* ==========================================
   ولو جيت وجبتها
   أزرار التحكيم تحت صورة الإجابة
========================================== */

#bring-it-answer-stage .bring-it-judge-title {
    display: none !important;
}

#bring-it-answer-stage .bring-it-judge-buttons {
    display: flex !important;

    width: min(760px, 82vw) !important;

    margin: 10px auto 0 !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    /* مهم:
       يخلي الفريق الأول يمين
       والثاني يسار */
    direction: ltr !important;
}

#bring-it-answer-stage .bring-it-judge-button {
    display: flex !important;

    flex: 1 1 0 !important;

    min-height: 54px !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 12px 20px !important;

    border-radius: 17px !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}

/* الفريق الأول - يمين */
#bring-it-team1-button {
    order: 3 !important;
}

/* لا أحد - الوسط */
#bring-it-none-button {
    order: 2 !important;
}

/* الفريق الثاني - يسار */
#bring-it-team2-button {
    order: 1 !important;
}
/* ==========================================
   ولو جيت وجبتها
   ضبط شاشة الإجابة داخل ارتفاع الشاشة
========================================== */

#bring-it-answer-stage {
    padding-top: 0 !important;
    padding-bottom: 12px !important;
    gap: 8px !important;
}

#bring-it-answer-stage .bring-it-answer-frame {
    width: min(980px, calc(100vw - 180px)) !important;

    height: calc(100vh - 365px) !important;
    min-height: 250px !important;
    max-height: 390px !important;

    flex: 0 1 auto !important;
}

#bring-it-answer-stage .bring-it-answer-description {
    margin: 4px auto !important;
    padding: 9px 22px !important;
}

#bring-it-answer-stage .bring-it-judge-buttons {
    margin: 4px auto 0 !important;
    flex-shrink: 0 !important;
}

#bring-it-answer-stage .bring-it-judge-button {
    min-height: 50px !important;
}
/* ==========================================
   ولو جيت وجبتها
   تكبير صورة مرحلة المشاهدة
========================================== */

#bring-it-watch-stage {
    padding:
        100px
        20px
        10px !important;

    box-sizing:
        border-box !important;
}

#bring-it-watch-stage .bring-it-image-frame {
    width:
        calc(100vw - 50px) !important;

    height:
        calc(100vh - 115px) !important;

    max-width:
        none !important;

    max-height:
        none !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        4px !important;
}

#bring-it-watch-stage .bring-it-image-frame img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;
}
/* ==========================================
   ولو جيت وجبتها
   إزالة علامة + والإبقاء على الدائرة فقط
========================================== */

.bring-it-target-marker::before,
.bring-it-target-marker::after {
    display: none !important;
    content: none !important;
}
/* ==========================================
   ولو جيت وجبتها
   تكبير الصورة فعلياً في شاشة المشاهدة
========================================== */

#bring-it-watch-stage .bring-it-image-frame {
    width: calc(100vw - 80px) !important;
    height: calc(100vh - 230px) !important;

    padding: 0 !important;
    margin: 0 auto !important;

    overflow: hidden !important;
    border-radius: 24px !important;
}

#bring-it-watch-stage .bring-it-image-frame img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 24px !important;
}
/* ==========================================
   ولو جيت وجبتها
   شاشة المشاهدة النهائية
========================================== */

/* نقل العنوان للأعلى وتصغيره */
.bring-it-shell {
    padding:
        12px 25px 12px !important;
}

.bring-it-header {
    position:
        relative !important;

    margin:
        0 auto 6px !important;

    transform:
        scale(0.78) !important;

    transform-origin:
        top center !important;

    flex-shrink:
        0 !important;
}


/* مرحلة مشاهدة الصورة */
#bring-it-watch-stage {
    width:
        100% !important;

    height:
        calc(100vh - 95px) !important;

    padding:
        0 !important;

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;
}


/* إخفاء الكلام الإضافي حتى نكسب أكبر مساحة */
#bring-it-watch-stage .bring-it-watch-top,
#bring-it-watch-stage .bring-it-watch-hint {
    display:
        none !important;
}


/* مربع الصورة الكبير */
#bring-it-watch-stage .bring-it-image-frame {
    width:
        min(82vh, 92vw) !important;

    height:
        min(82vh, 92vw) !important;

    aspect-ratio:
        1 / 1 !important;

    max-width:
        none !important;

    max-height:
        none !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    border-radius:
        22px !important;
}


/* الصورة كاملة بدون أي قص */
#bring-it-watch-stage .bring-it-image-frame img {
    width:
        100% !important;

    height:
        100% !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    border-radius:
        20px !important;
}
/* ==========================================
   ولو جيت وجبتها
   إزالة صندوق الصورة وتكبير الصورة نفسها
========================================== */

#bring-it-watch-stage {
    width: 100% !important;
    height: calc(100vh - 80px) !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/* إلغاء الصندوق تماماً */
#bring-it-watch-stage .bring-it-image-frame {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* الصورة نفسها بأكبر حجم ممكن بدون قص */
#bring-it-watch-stage .bring-it-image-frame img {
    width: auto !important;
    height: auto !important;

    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 115px) !important;

    object-fit: contain !important;

    border-radius: 14px !important;

    display: block !important;
}
/* ==========================================
   ولو جيت وجبتها - تحسين شاشة الطلب
========================================== */

/* إخفاء كلمة طيب */
.bring-it-speech-small {
    display: none !important;
}

/* تصغير صندوق الطلب */
.bring-it-speech-bubble {
    width: min(650px, 65vw) !important;
    padding: 22px 30px !important;
}

/* تصغير جملة جيب لي... قليلاً */
#bring-it-request {
    font-size: 38px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
}

/* تكبير الجملة التوضيحية الموجودة أعلى الشاشة */
.bring-it-header p,
#bring-it-subtitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    opacity: 1 !important;
}
/* ==========================================
   ولو جيت وجبتها
   تحسين شاشة الإجابة
========================================== */

/* حذف جملة شرح مكان الشيء */
#bring-it-answer-stage .bring-it-answer-description {
    display: none !important;
}


/* شاشة الإجابة تستغل كامل المساحة */
#bring-it-answer-stage {
    width: 100% !important;
    height: calc(100vh - 85px) !important;

    padding: 0 20px 12px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;
}


/* إلغاء صندوق الصورة نهائياً */
#bring-it-answer-stage .bring-it-answer-frame {
    width: 100% !important;
    height: calc(100vh - 195px) !important;

    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 auto !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
}


/* تكبير الصورة مع إبقائها كاملة بدون قص */
#bring-it-answer-stage .bring-it-answer-frame img {
    width: auto !important;
    height: auto !important;

    max-width: calc(100vw - 50px) !important;
    max-height: calc(100vh - 205px) !important;

    object-fit: contain !important;

    display: block !important;

    border-radius: 14px !important;
}


/* تنزيل أزرار التحكيم لأسفل */
#bring-it-answer-stage .bring-it-judge-buttons {
    width: min(760px, 85vw) !important;

    margin-top: auto !important;
    margin-bottom: 2px !important;

    flex-shrink: 0 !important;

    gap: 14px !important;
}
/* ==========================================
   ولو جيت وجبتها
   عنوان كبير أثناء أول 10 ثواني
========================================== */

/* أثناء مرحلة مشاهدة الصورة */
#bring-it-watch-stage:not(.hidden) ~ * {
    pointer-events: none;
}

/* تكبير الهيدر أثناء المشاهدة */
.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
.bring-it-header {
    transform: none !important;

    margin:
        0 auto 6px !important;

    padding:
        6px 18px !important;
}

/* تكبير الجملة التوضيحية خلال أول 10 ثواني */
.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
#bring-it-subtitle {
    font-size:
        26px !important;

    font-weight:
        900 !important;

    line-height:
        1.25 !important;

    opacity:
        1 !important;

    color:
        #ffffff !important;

    margin-top:
        4px !important;
}

/* تصغير اسم الفئة قليلاً حتى تكون الجملة أهم */
.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
.bring-it-header h2 {
    font-size:
        24px !important;
}

/* تأكيد إخفاء عداد المشاهدة */
.bring-it-watch-timer,
#bring-it-watch-time {
    display:
        none !important;
}
#bring-it-watch-stage .bring-it-image-frame img {
    filter: blur(12px) !important;
    transition: filter 0.5s ease !important;
}

#bring-it-watch-stage.bring-it-clear-image
.bring-it-image-frame img {
    filter: blur(0) !important;
}
/* ==========================================
   ولو جيت وجبتها
   الجملة في منتصف الصورة أثناء أول 10 ثواني
========================================== */

#bring-it-watch-stage {
    position: relative !important;
}

.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
.bring-it-header {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    z-index: 50 !important;

    width:
        auto !important;

    min-width:
        620px !important;

    max-width:
        80vw !important;

    margin:
        0 !important;

    padding:
        20px 30px !important;

    text-align:
        center !important;

    background:
        rgba(8, 12, 30, 0.72) !important;

    border-radius:
        22px !important;

    backdrop-filter:
        blur(5px) !important;
}


/* نخفي اسم الفئة خلال أول 10 ثواني */
.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
.bring-it-header h2,

.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
.bring-it-title-icon {
    display:
        none !important;
}


/* الجملة نفسها */
.bring-it-overlay:has(#bring-it-watch-stage:not(.hidden))
#bring-it-subtitle {
    display:
        block !important;

    margin:
        0 !important;

    font-size:
        34px !important;

    line-height:
        1.35 !important;

    font-weight:
        900 !important;

    color:
        #ffffff !important;

    text-align:
        center !important;

    opacity:
        1 !important;
}
#bring-it-watch-stage .bring-it-image-frame img {
    filter: blur(12px) !important;
    transition: filter 0.5s ease !important;
}

#bring-it-watch-stage.bring-it-clear-image
.bring-it-image-frame img {
    filter: blur(0) !important;
}
/* إخفاء صندوق الجملة بالكامل بعد أول 10 ثواني */
.bring-it-header.bring-it-intro-hidden {
    display: none !important;
}
/* ==========================================
   فئة لا ترمش — التصميم الأساسي
=========================================== */

.dont-blink-hidden {
    display: none !important;
}

.dont-blink-overlay {
    --blink-navy: #050b20;
    --blink-blue: #1267d8;
    --blink-cyan: #35dcff;
    --blink-gold: #ffd45a;
    --blink-gold-dark: #9f6800;
    --blink-red: #ff4967;
    --blink-green: #31e59a;

    position: fixed;
    z-index: 100000;
    inset: 0;

    overflow-y: auto;

    padding: 18px;

    color: white;

    background:
        radial-gradient(
            circle at 50% -20%,
            #164d94,
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #020617,
            #071738 55%,
            #03091d
        );
}

.dont-blink-shell {
    position: relative;
    z-index: 2;

    width: min(1150px, 100%);
    margin: auto;

    text-align: center;
}

.dont-blink-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
    margin-bottom: 10px;
}

.dont-blink-header h2 {
    margin: 7px 0 0;

    color: white;

    font-size:
        clamp(34px, 5vw, 60px);

    text-shadow:
        0 5px 0 rgba(0, 0, 0, 0.35);
}

.dont-blink-badge,
.dont-blink-difficulty {
    display: inline-block;

    padding: 7px 17px;

    border-radius: 999px;

    font-weight: 900;
}

.dont-blink-badge {
    color: var(--blink-navy);
    background: var(--blink-gold);

    box-shadow:
        0 5px 0 var(--blink-gold-dark);
}

.dont-blink-difficulty {
    border:
        2px solid rgba(255, 255, 255, 0.45);

    background:
        rgba(255, 255, 255, 0.10);
}

.dont-blink-status {
    min-height: 36px;

    margin: 5px 0 12px;

    color: #dffaff;

    font-size:
        clamp(17px, 2.4vw, 24px);

    font-weight: 900;
}

/* ==========================================
   ساحة اللعب
=========================================== */

.dont-blink-arena {
    position: relative;

    width: 100%;
    height: min(520px, 58vh);
    min-height: 390px;

    overflow: hidden;

    border:
        2px solid rgba(255, 255, 255, 0.25);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(39, 152, 255, 0.25),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            rgba(7, 26, 65, 0.94),
            rgba(2, 8, 27, 0.98)
        );

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.50),
        inset 0 0 60px
        rgba(53, 220, 255, 0.08);
}

/* ==========================================
   الطاولة
=========================================== */

.dont-blink-table {
    position: absolute;
    z-index: 2;

    right: -5%;
    bottom: 0;

    width: 110%;
    height: 122px;

    border-top:
        8px solid #e5a928;

    background:
        linear-gradient(
            180deg,
            #9a5a19,
            #4b2509 70%
        );

    box-shadow:
        inset 0 15px 25px
        rgba(255, 209, 96, 0.18),
        0 -10px 35px
        rgba(0, 0, 0, 0.45);
}

/* ==========================================
   الأكواب
=========================================== */

.dont-blink-cup {
    position: absolute;
    z-index: 8;

    left: 0;
    bottom: 92px;

    width:
        clamp(78px, 11vw, 135px);

    height:
        clamp(120px, 17vw, 195px);

    will-change: transform;

    transform:
        translate3d(0, 0, 0);
}

.dont-blink-cup-body {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border:
        4px solid rgba(255, 255, 255, 0.55);

    border-radius:
        20% 20% 36% 36% /
        10% 10% 18% 18%;

    background:
        linear-gradient(
            100deg,
            #071a47,
            #1c65bd 42%,
            #56c9ff 52%,
            #164c9d 67%,
            #061638
        );

    box-shadow:
        inset 8px 0 15px
        rgba(255, 255, 255, 0.12),
        inset -10px 0 16px
        rgba(0, 0, 0, 0.42),
        0 13px 15px
        rgba(0, 0, 0, 0.55);

    transition:
        transform 0.55s
        cubic-bezier(
            0.22,
            0.8,
            0.25,
            1
        );

    transform:
        translateY(0);
}

.dont-blink-cup-body::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: -3px;
    left: 3%;

    width: 94%;
    height: 18px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #e8f8ff,
            #297aca 48%,
            #061a40 55%
        );

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.65);
}

.dont-blink-cup-body::after {
    content: "";

    position: absolute;
    z-index: 3;

    left: 6%;
    bottom: -2px;

    width: 88%;
    height: 17px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #143d7a,
            #020817
        );

    box-shadow:
        0 6px 8px
        rgba(0, 0, 0, 0.65);
}

/* شعار بزغو على كل كوب */

.dont-blink-cup-body img {
    position: absolute;
    z-index: 2;

    top: 31%;
    left: 13%;

    width: 74%;
    height: 39%;

    object-fit: contain;

    padding: 5px;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.88);

    filter:
        drop-shadow(
            0 4px 5px
            rgba(0, 0, 0, 0.45)
        );

    pointer-events: none;
}

/* رفع الكوب لإظهار الكرة */

.dont-blink-cup.is-lifted
.dont-blink-cup-body {
    transform:
        translateY(-105px)
        rotate(-2deg);
}

/* ==========================================
   الكرة
=========================================== */

.dont-blink-ball {
    position: absolute;
    z-index: 7;

    left: 0;
    bottom: 96px;

    width:
        clamp(33px, 4.5vw, 55px);

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            white 0 10%,
            #fff06a 15%,
            #ffba18 48%,
            #dc6500 74%,
            #6d2400
        );

    box-shadow:
        0 8px 10px
        rgba(0, 0, 0, 0.58),
        0 0 24px
        rgba(255, 207, 57, 0.65);

    will-change: transform;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity 0.25s ease;
}

.dont-blink-ball.is-bouncing {
    animation:
        dontBlinkBallBounce
        0.55s ease infinite alternate;
}

/* ==========================================
   أرقام المواقع
=========================================== */

.dont-blink-position-numbers {
    position: absolute;
    z-index: 10;

    right: 0;
    bottom: 25px;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    padding:
        0 clamp(20px, 5vw, 62px);

    pointer-events: none;
}

.dont-blink-position-numbers span {
    color: white;

    font-size:
        clamp(22px, 3vw, 36px);

    font-weight: 900;

    text-shadow:
        0 4px 0
        rgba(0, 0, 0, 0.55);
}

/* ==========================================
   الأزرار والمؤقت
=========================================== */

.dont-blink-button {
    border: 0;
    border-radius: 16px;

    padding: 14px 25px;
    margin-top: 18px;

    font-family: inherit;

    font-size:
        clamp(16px, 2vw, 20px);

    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.dont-blink-button:active {
    transform: translateY(4px);
}

.dont-blink-gold {
    color: var(--blink-navy);
    background: var(--blink-gold);

    box-shadow:
        0 7px 0
        var(--blink-gold-dark);
}

.dont-blink-timer-area {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;
    margin-top: 18px;
}

.dont-blink-team-name {
    font-size:
        clamp(19px, 3vw, 29px);
}

.dont-blink-timer {
    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--blink-navy);
    background: var(--blink-gold);

    font-size: 31px;
    font-weight: 900;

    box-shadow:
        0 7px 0
        var(--blink-gold-dark);
}
/* ==========================================
   لا ترمش — الخلفية المشتتة
=========================================== */

.dont-blink-light {
    position: absolute;
    z-index: 1;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    opacity: 0.30;

    filter: blur(45px);

    pointer-events: none;
}

.dont-blink-light.light-one {
    top: -170px;
    left: -100px;

    background: #24d9ff;

    animation:
        dontBlinkLightOne
        6s ease-in-out infinite alternate;
}

.dont-blink-light.light-two {
    top: 20px;
    right: -160px;

    background: #9a45ff;

    animation:
        dontBlinkLightTwo
        5s ease-in-out infinite alternate;
}

.dont-blink-light.light-three {
    bottom: -220px;
    left: 38%;

    background: #ffbf29;

    animation:
        dontBlinkLightThree
        7s ease-in-out infinite alternate;
}

/* الدوائر المتحركة */

.dont-blink-rings span {
    position: absolute;
    z-index: 1;

    border:
        3px solid rgba(
            83,
            222,
            255,
            0.16
        );

    border-radius: 50%;

    pointer-events: none;
}

.dont-blink-rings span:nth-child(1) {
    width: 260px;
    height: 260px;

    top: 25px;
    left: 8%;

    animation:
        dontBlinkRingSpin
        8s linear infinite;
}

.dont-blink-rings span:nth-child(2) {
    width: 420px;
    height: 420px;

    top: -105px;
    right: 22%;

    border-style: dashed;

    animation:
        dontBlinkRingSpinReverse
        11s linear infinite;
}

.dont-blink-rings span:nth-child(3) {
    width: 210px;
    height: 210px;

    top: 75px;
    right: 4%;

    animation:
        dontBlinkRingSpin
        6s linear infinite;
}

/* الجزيئات */

.dont-blink-particles i {
    position: absolute;
    z-index: 1;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--blink-cyan);

    box-shadow:
        0 0 16px
        var(--blink-cyan);

    pointer-events: none;

    animation:
        dontBlinkParticleFloat
        5s linear infinite;
}

.dont-blink-particles i:nth-child(1) {
    left: 8%;
    top: 76%;

    animation-delay: -1s;
}

.dont-blink-particles i:nth-child(2) {
    left: 19%;
    top: 44%;

    animation-delay: -3s;
}

.dont-blink-particles i:nth-child(3) {
    left: 34%;
    top: 72%;

    animation-delay: -2s;
}

.dont-blink-particles i:nth-child(4) {
    left: 48%;
    top: 37%;

    animation-delay: -4s;
}

.dont-blink-particles i:nth-child(5) {
    left: 61%;
    top: 68%;

    animation-delay: -0.5s;
}

.dont-blink-particles i:nth-child(6) {
    left: 73%;
    top: 31%;

    animation-delay: -2.8s;
}

.dont-blink-particles i:nth-child(7) {
    left: 85%;
    top: 70%;

    animation-delay: -1.7s;
}

.dont-blink-particles i:nth-child(8) {
    left: 94%;
    top: 48%;

    animation-delay: -3.7s;
}

/*
   أثناء حركة الأكواب تزداد الخلفية،
   لكن لا تمر أي مؤثرات فوق الأكواب.
*/

.dont-blink-arena.is-shuffling
.dont-blink-light {
    opacity: 0.48;

    animation-duration: 2.8s;
}

.dont-blink-arena.is-shuffling
.dont-blink-rings span {
    border-color:
        rgba(83, 222, 255, 0.29);

    animation-duration: 4s;
}

.dont-blink-arena.is-shuffling
.dont-blink-particles i {
    animation-duration: 2.7s;
}

/* ==========================================
   مؤثرات النتيجة
=========================================== */

.dont-blink-cup.is-correct
.dont-blink-cup-body {
    border-color:
        var(--blink-green);

    box-shadow:
        inset 0 0 20px
        rgba(49, 229, 154, 0.50),
        0 0 42px
        rgba(49, 229, 154, 0.85);
}

.dont-blink-cup.is-wrong
.dont-blink-cup-body {
    border-color:
        var(--blink-red);

    animation:
        dontBlinkWrongCup
        0.45s ease;
}

.dont-blink-timer.is-danger {
    color: white;

    background:
        var(--blink-red);

    box-shadow:
        0 7px 0 #99142d;

    animation:
        dontBlinkTimerPulse
        0.5s ease infinite alternate;
}

/* أزرار الحكم */

.dont-blink-judgement {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    gap: 14px;
}

.dont-blink-team-button-one {
    color: white;

    background:
        linear-gradient(
            180deg,
            #258dff,
            #0750af
        );

    box-shadow:
        0 7px 0 #043273;
}

.dont-blink-team-button-two {
    color: white;

    background:
        linear-gradient(
            180deg,
            #ff5572,
            #b61636
        );

    box-shadow:
        0 7px 0 #780b21;
}

.dont-blink-no-one {
    color: white;

    background:
        linear-gradient(
            180deg,
            #5c687e,
            #283246
        );

    box-shadow:
        0 7px 0 #121827;
}

/* ==========================================
   الحركات
=========================================== */

@keyframes dontBlinkBallBounce {
    from {
        transform:
            translate3d(
                var(--ball-x, 0),
                0,
                0
            )
            translateY(0);
    }

    to {
        transform:
            translate3d(
                var(--ball-x, 0),
                0,
                0
            )
            translateY(-17px);
    }
}

@keyframes dontBlinkLightOne {
    to {
        transform:
            translate(260px, 130px)
            scale(1.30);
    }
}

@keyframes dontBlinkLightTwo {
    to {
        transform:
            translate(-290px, 120px)
            scale(0.80);
    }
}

@keyframes dontBlinkLightThree {
    to {
        transform:
            translate(150px, -210px)
            scale(1.35);
    }
}

@keyframes dontBlinkRingSpin {
    to {
        transform:
            rotate(360deg)
            scale(1.12);
    }
}

@keyframes dontBlinkRingSpinReverse {
    to {
        transform:
            rotate(-360deg)
            scale(0.88);
    }
}

@keyframes dontBlinkParticleFloat {
    0% {
        opacity: 0;

        transform:
            translateY(90px)
            scale(0.5);
    }

    25% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.65;
    }

    100% {
        opacity: 0;

        transform:
            translateY(-230px)
            translateX(55px)
            scale(1.3);
    }
}

@keyframes dontBlinkWrongCup {
    20%,
    60% {
        transform:
            translateX(-10px);
    }

    40%,
    80% {
        transform:
            translateX(10px);
    }
}

@keyframes dontBlinkTimerPulse {
    to {
        transform:
            scale(1.09);
    }
}

/* ==========================================
   الهاتف والشاشات الصغيرة
=========================================== */

@media (max-width: 760px) {

    .dont-blink-overlay {
        padding: 9px;
    }

    .dont-blink-header h2 {
        font-size: 31px;
    }

    .dont-blink-badge,
    .dont-blink-difficulty {
        padding: 5px 11px;

        font-size: 13px;
    }

    .dont-blink-arena {
        height: 430px;
        min-height: 430px;

        border-radius: 23px;
    }

    .dont-blink-cup {
        width:
            clamp(65px, 20vw, 94px);

        height:
            clamp(103px, 30vw, 145px);

        bottom: 91px;
    }

    .dont-blink-cup.is-lifted
    .dont-blink-cup-body {
        transform:
            translateY(-82px);
    }

    .dont-blink-ball {
        bottom: 95px;

        width:
            clamp(30px, 9vw, 43px);
    }

    .dont-blink-position-numbers {
        padding: 0 8px;
    }

    .dont-blink-table {
        height: 120px;
    }

    .dont-blink-judgement {
        gap: 8px;
    }

    .dont-blink-judgement
    .dont-blink-button {
        flex: 1;

        min-width: 95px;

        padding:
            12px 8px;

        font-size: 14px;
    }
}
/* مؤقت لا ترمش أعلى يسار الشاشة */

.dont-blink-timer-area {
    position: fixed;
    z-index: 100010;

    top: 22px;
    left: 22px;

    margin: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13px;

    padding: 11px 16px;

    border:
        2px solid rgba(255, 255, 255, 0.32);

    border-radius: 20px;

    background:
        rgba(3, 12, 35, 0.90);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.40);

    backdrop-filter:
        blur(10px);
}

.dont-blink-team-name {
    color: white;

    font-size:
        clamp(16px, 2vw, 23px);
}

.dont-blink-timer {
    width: 65px;
    height: 65px;

    font-size: 27px;
}

@media (max-width: 760px) {

    .dont-blink-timer-area {
        top: 8px;
        left: 8px;

        padding: 7px 9px;
    }

    .dont-blink-timer {
        width: 51px;
        height: 51px;

        font-size: 22px;
    }

    .dont-blink-team-name {
        max-width: 120px;

        font-size: 13px;
    }
}
/* إخفاء فئة خاصة ومستوى الصعوبة من لا ترمش */

.dont-blink-badge,
.dont-blink-difficulty {
    display: none !important;
}
/* منع ظهور أزرار الحكم قبل كشف الإجابة */

.dont-blink-judgement.dont-blink-hidden {
    display: none !important;
}
/* تثبيت أزرار لا ترمش في صف واحد */

.dont-blink-judgement {
    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        !important;

    flex-direction: row !important;
}

.dont-blink-judgement
.dont-blink-button {
    grid-column: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}
html:has(.dont-blink-overlay:not(.dont-blink-hidden)),
body:has(.dont-blink-overlay:not(.dont-blink-hidden)) {
    overflow: hidden !important;
}

.dont-blink-overlay {
    inset: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
}

.dont-blink-shell {
    height: 100% !important;
    max-height: 100% !important;
}

.dont-blink-arena {
    min-height: 245px !important;
}

.dont-blink-judgement {
    margin:
        7px auto 5px !important;
}

@media (max-height: 720px) {

    .dont-blink-header h2 {
        font-size: 37px !important;
    }

    .dont-blink-status {
        min-height: 22px !important;

        margin: 0 0 5px !important;
    }

    .dont-blink-arena {
        min-height: 235px !important;
    }

    .dont-blink-judgement
    .dont-blink-button {
        padding: 8px 6px !important;
    }
}
/* أيقونة فئة لا ترمش في قائمة الفئات */

.category-card .dont-blink-category-icon {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 6px !important;

    width: 90px !important;
    height: 52px !important;

    margin: 0 auto !important;
    overflow: visible !important;
}

.category-card .dont-blink-category-icon .mini-cup {
    position: relative !important;
    z-index: 2 !important;

    display: block !important;
    flex: 0 0 23px !important;

    width: 23px !important;
    height: 32px !important;

    border: 2px solid #bcefff !important;
    border-radius: 5px 5px 9px 9px !important;

    background:
        linear-gradient(
            90deg,
            #073c87,
            #1f93ee 48%,
            #062e70
        ) !important;

    clip-path:
        polygon(
            18% 0,
            82% 0,
            100% 100%,
            0 100%
        ) !important;

    box-shadow:
        0 4px 7px rgba(0, 0, 0, 0.45) !important;
}

.category-card .dont-blink-category-icon .mini-cup-two {
    transform: translateY(-12px) !important;
}

.category-card .dont-blink-category-icon .mini-hidden-ball {
    position: absolute !important;
    z-index: 1 !important;

    display: block !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 14px !important;
    height: 14px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff6a5,
            #ffb300 45%,
            #e35b00
        ) !important;

    box-shadow:
        0 0 9px #ffb300 !important;

    transform: translateX(-50%) !important;
}
/* ==========================================
   وين الغلط؟
========================================== */

.wrong-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;

    width: 100vw;
    height: 100vh;

    background:
        radial-gradient(
            circle at top right,
            rgba(122, 66, 255, 0.24),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(255, 70, 140, 0.18),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            #11162b,
            #1b1734 55%,
            #101525
        );

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow: hidden;
}

.wrong-info-overlay.hidden {
    display: none !important;
}

.wrong-info-shell {
    width: min(1180px, 96vw);
    height: min(760px, 94vh);

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 18px 22px;

    border-radius: 30px;

    background:
        rgba(20, 25, 48, 0.96);

    border:
        1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 20px 70px rgba(0,0,0,0.45);
}

.wrong-info-header {
    text-align: center;
    flex-shrink: 0;
}

.wrong-info-header h2 {
    margin: 0;

    font-size: 34px;
    font-weight: 900;

    color: #ffffff;
}

.wrong-info-header p {
    margin: 5px 0 0;

    font-size: 17px;
    font-weight: 700;

    color: rgba(255,255,255,0.76);
}

.wrong-info-content {
    flex: 1;

    display: grid;
    grid-template-columns: 38% 1fr;

    gap: 22px;

    min-height: 0;
}

.wrong-info-image-area {
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;
}

#wrong-info-image {
    width: 100%;
    height: min(470px, 58vh);

    object-fit: contain;

    border-radius: 24px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 14px 38px rgba(0,0,0,0.30);
}

#wrong-info-title {
    margin: 0;

    font-size: 27px;
    font-weight: 900;

    color: #ffffff;

    text-align: center;
}

.wrong-info-statements {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 13px;

    min-height: 0;
}

.wrong-info-statement {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.075);

    border:
        1px solid rgba(255,255,255,0.11);

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.45;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.wrong-info-number {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.13);

    font-size: 20px;
    font-weight: 900;
}

.wrong-info-text {
    flex: 1;
}

.wrong-info-show-answer {
    align-self: center;

    min-width: 260px;

    padding: 14px 24px;

    border: none;
    border-radius: 18px;

    font-size: 19px;
    font-weight: 900;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #ffd86f,
            #ffb52e
        );

    color: #1e2238;

    box-shadow:
        0 10px 26px rgba(255,181,46,0.28);

    flex-shrink: 0;
}

/* المعلومة الخطأ عند كشف الإجابة */
.wrong-info-statement.is-wrong {
    background:
        rgba(255, 62, 88, 0.20);

    border-color:
        rgba(255, 82, 102, 0.72);

    transform:
        scale(1.02);
}

.wrong-info-statement.is-wrong
.wrong-info-number {
    background:
        #ff405b;

    color:
        #ffffff;
}
/* ==========================================
   وين الغلط؟ - تصميم احترافي
========================================== */

.wrong-info-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12000 !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: 18px !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(92, 90, 255, 0.28),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 25%,
            rgba(255, 76, 120, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(0, 205, 255, 0.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0c1020 0%,
            #17142f 42%,
            #221331 72%,
            #0c1020 100%
        ) !important;

    animation:
        wrongInfoBackgroundMove 12s ease-in-out infinite alternate !important;
}


/* إخفاء */
.wrong-info-overlay.hidden {
    display: none !important;
}


/* حركة الخلفية */
@keyframes wrongInfoBackgroundMove {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            0% 0%;
    }

    100% {
        background-position:
            8% 8%,
            92% 12%,
            55% 92%,
            100% 100%;
    }
}


/* دوائر ضوئية متحركة */
.wrong-info-overlay::before,
.wrong-info-overlay::after {
    content: "" !important;

    position: absolute !important;

    width: 380px !important;
    height: 380px !important;

    border-radius: 50% !important;

    filter: blur(55px) !important;

    opacity: 0.20 !important;

    pointer-events: none !important;

    animation:
        wrongInfoFloat 8s ease-in-out infinite alternate !important;
}

.wrong-info-overlay::before {
    top: -120px !important;
    right: -100px !important;

    background:
        rgba(115, 82, 255, 0.85) !important;
}

.wrong-info-overlay::after {
    bottom: -130px !important;
    left: -90px !important;

    background:
        rgba(255, 70, 130, 0.80) !important;

    animation-delay:
        -3s !important;
}

@keyframes wrongInfoFloat {
    0% {
        transform:
            translate(0, 0)
            scale(1) !important;
    }

    100% {
        transform:
            translate(45px, 25px)
            scale(1.15) !important;
    }
}


/* الصندوق الرئيسي */
.wrong-info-shell {
    position: relative !important;
    z-index: 2 !important;

    width: min(1220px, 96vw) !important;
    height: min(780px, 94vh) !important;

    padding: 18px 24px 16px !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;

    border-radius: 32px !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 24, 48, 0.94),
            rgba(31, 22, 55, 0.94)
        ) !important;

    border:
        1px solid rgba(255,255,255,0.14) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.48),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;

    backdrop-filter:
        blur(18px) !important;
}


/* العنوان */
.wrong-info-header {
    position: relative !important;

    text-align: center !important;

    padding-bottom: 8px !important;

    flex-shrink: 0 !important;
}

.wrong-info-header h2 {
    margin: 0 !important;

    font-size: 38px !important;
    font-weight: 1000 !important;

    letter-spacing: 0.5px !important;

    color: #ffffff !important;

    text-shadow:
        0 4px 18px rgba(0,0,0,0.35) !important;
}

.wrong-info-header h2::before {
    content: "❌" !important;

    display: inline-block !important;

    margin-left: 8px !important;

    animation:
        wrongInfoIconPulse 1.8s ease-in-out infinite !important;
}

@keyframes wrongInfoIconPulse {
    0%,
    100% {
        transform:
            scale(1) rotate(0deg);
    }

    50% {
        transform:
            scale(1.12) rotate(-6deg);
    }
}

.wrong-info-header p {
    margin: 5px 0 0 !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    color:
        rgba(255,255,255,0.72) !important;
}


/* المحتوى */
.wrong-info-content {
    flex: 1 !important;

    display: grid !important;

    grid-template-columns:
        40% 1fr !important;

    gap: 24px !important;

    min-height: 0 !important;
}


/* جهة الصورة */
.wrong-info-image-area {
    position: relative !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;
}


/* الصورة */
#wrong-info-image {
    width: 100% !important;
    height: min(475px, 58vh) !important;

    object-fit: contain !important;

    border-radius: 26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.07),
            rgba(255,255,255,0.025)
        ) !important;

    border:
        1px solid rgba(255,255,255,0.14) !important;

    box-shadow:
        0 18px 42px rgba(0,0,0,0.38) !important;
}


/* اسم الشخص أو الشيء */
#wrong-info-title {
    margin: 0 !important;

    padding: 8px 18px !important;

    max-width: 96% !important;

    font-size: 28px !important;
    font-weight: 1000 !important;

    color: #ffffff !important;

    text-align: center !important;

    border-radius: 16px !important;

    background:
        rgba(255,255,255,0.07) !important;

    border:
        1px solid rgba(255,255,255,0.10) !important;
}


/* جهة المعلومات */
.wrong-info-statements {
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    gap: 14px !important;
}


/* كل معلومة */
.wrong-info-statement {
    position: relative !important;

    min-height: 88px !important;

    display: flex !important;
    align-items: center !important;

    gap: 15px !important;

    padding: 15px 20px !important;

    overflow: hidden !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.085),
            rgba(255,255,255,0.045)
        ) !important;

    border:
        1px solid rgba(255,255,255,0.11) !important;

    box-shadow:
        0 9px 24px rgba(0,0,0,0.15) !important;

    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 850 !important;

    line-height: 1.45 !important;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* لمعة خفيفة داخل البطاقة */
.wrong-info-statement::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: -80% !important;

    width: 50% !important;
    height: 100% !important;

    transform:
        skewX(-20deg) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.06),
            transparent
        ) !important;

    animation:
        wrongInfoShine 6s linear infinite !important;

    pointer-events: none !important;
}

@keyframes wrongInfoShine {
    0% {
        right: -80%;
    }

    40%,
    100% {
        right: 140%;
    }
}


/* رقم المعلومة */
.wrong-info-number {
    width: 52px !important;
    height: 52px !important;

    flex-shrink: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(116, 105, 255, 0.92),
            rgba(79, 70, 202, 0.92)
        ) !important;

    color: #ffffff !important;

    font-size: 22px !important;
    font-weight: 1000 !important;

    box-shadow:
        0 8px 18px rgba(72, 67, 205, 0.25) !important;
}


/* النص */
.wrong-info-text {
    position: relative !important;

    z-index: 2 !important;

    flex: 1 !important;
}


/* زر إظهار الإجابة */
.wrong-info-show-answer {
    align-self: center !important;

    min-width: 310px !important;

    padding: 15px 30px !important;

    border: none !important;
    border-radius: 18px !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;

    font-size: 20px !important;
    font-weight: 1000 !important;

    color: #201c2d !important;

    background:
        linear-gradient(
            135deg,
            #ffe37e,
            #ffb82f
        ) !important;

    box-shadow:
        0 12px 28px rgba(255, 183, 47, 0.28) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

.wrong-info-show-answer:hover {
    transform:
        translateY(-2px) scale(1.02) !important;

    box-shadow:
        0 16px 34px rgba(255, 183, 47, 0.36) !important;
}


/* ==========================================
   كشف المعلومة الخطأ
========================================== */

.wrong-info-statement.is-wrong {
    background:
        linear-gradient(
            145deg,
            rgba(255, 62, 92, 0.30),
            rgba(174, 20, 53, 0.28)
        ) !important;

    border-color:
        rgba(255, 88, 111, 0.92) !important;

    box-shadow:
        0 0 0 1px rgba(255, 75, 102, 0.20),
        0 14px 34px rgba(255, 45, 82, 0.22) !important;

    transform:
        scale(1.025) !important;

    animation:
        wrongInfoWrongPulse 1.4s ease-in-out infinite alternate !important;
}

@keyframes wrongInfoWrongPulse {
    from {
        box-shadow:
            0 0 0 1px rgba(255, 75, 102, 0.20),
            0 12px 28px rgba(255, 45, 82, 0.18);
    }

    to {
        box-shadow:
            0 0 0 3px rgba(255, 75, 102, 0.14),
            0 18px 42px rgba(255, 45, 82, 0.34);
    }
}

.wrong-info-statement.is-wrong
.wrong-info-number {
    background:
        linear-gradient(
            145deg,
            #ff536c,
            #d92145
        ) !important;

    box-shadow:
        0 8px 20px rgba(255, 53, 88, 0.30) !important;
}


/* علامة X على المعلومة الخطأ */
.wrong-info-statement.is-wrong::before {
    content: "✖" !important;

    position: absolute !important;

    left: 18px !important;

    font-size: 29px !important;

    font-weight: 1000 !important;

    color: #ff6b80 !important;

    animation:
        wrongInfoWrongIcon 0.35s ease-out !important;
}

@keyframes wrongInfoWrongIcon {
    from {
        transform:
            scale(0) rotate(-25deg);
    }

    to {
        transform:
            scale(1) rotate(0deg);
    }
}

/* ==========================================
   وين الغلط؟ - أزرار التحكيم
========================================== */

.wrong-info-judge-buttons {
    width: min(760px, 88vw);

    margin: 6px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    direction: ltr;
}

.wrong-info-judge-buttons.hidden {
    display: none !important;
}

.wrong-info-judge-button {
    min-width: 190px;

    padding: 14px 20px;

    border: none;
    border-radius: 18px;

    font-size: 19px;
    font-weight: 900;

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.wrong-info-judge-button:hover {
    transform: translateY(-2px);
}

.wrong-info-team1 {
    order: 3;

    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

.wrong-info-none {
    order: 2;

    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}

.wrong-info-team2 {
    order: 1;

    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}
/* ==========================================
   وين الغلط؟ - المؤقت أعلى اليسار
========================================== */

.wrong-info-timer-box {
    position: fixed !important;

    top: 20px !important;
    left: 22px !important;

    z-index: 13000 !important;

    width: 150px !important;
    min-height: 150px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    padding: 14px !important;

    border-radius: 26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(25, 31, 58, 0.97),
            rgba(43, 30, 68, 0.97)
        ) !important;

    border:
        1px solid rgba(255,255,255,0.14) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.35) !important;

    color: #ffffff !important;
}

.wrong-info-timer-label {
    font-size: 13px !important;
    font-weight: 800 !important;

    color:
        rgba(255,255,255,0.72) !important;
}

#wrong-info-time {
    font-size: 52px !important;
    line-height: 1 !important;

    font-weight: 1000 !important;

    color: #ffffff !important;
}

.wrong-info-timer-seconds {
    font-size: 13px !important;
    font-weight: 800 !important;

    color:
        rgba(255,255,255,0.72) !important;
}

.wrong-info-current-team {
    width: 100% !important;

    margin-top: 8px !important;
    padding-top: 8px !important;

    border-top:
        1px solid rgba(255,255,255,0.14) !important;

    text-align: center !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    color: #ffd76a !important;
}
/* ==========================================
   وين الغلط؟ - تحذير آخر 5 ثواني
========================================== */

#wrong-info-timer-box.is-warning {
    border:
        2px solid rgba(255, 75, 75, 0.95) !important;

    box-shadow:
        0 0 0 4px rgba(255, 75, 75, 0.12),
        0 0 30px rgba(255, 45, 45, 0.48),
        0 15px 35px rgba(0,0,0,0.35) !important;

    animation:
        wrongInfoTimerPulse
        0.7s
        ease-in-out
        infinite !important;
}

#wrong-info-timer-box.is-warning
#wrong-info-time {
    color:
        #ff4d4d !important;
}

@keyframes wrongInfoTimerPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.06);
    }
}
/* ==========================================
   وين الغلط؟ - تحسين الحجم والترتيب والخلفية
========================================== */

#wrong-info-overlay {
    position: fixed !important;
    inset: 0 !important;

    overflow: hidden !important;

    padding: 12px 18px !important;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(108, 92, 255, 0.18),
            transparent 26%
        ),
        radial-gradient(
            circle at 86% 20%,
            rgba(255, 72, 120, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(48, 168, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0c1124,
            #17152f 56%,
            #25132f
        ) !important;
}


/* ==========================================
   رموز متحركة بالخلفية
========================================== */

#wrong-info-overlay .wrong-info-shell::before,
#wrong-info-overlay .wrong-info-shell::after {
    position: fixed !important;

    z-index: -1 !important;

    pointer-events: none !important;

    opacity: 0.13 !important;

    font-size: 54px !important;

    animation:
        wrongInfoBgFloat
        6s ease-in-out
        infinite !important;
}

#wrong-info-overlay .wrong-info-shell::before {
    content: "❓" !important;

    top: 16% !important;
    right: 4% !important;
}

#wrong-info-overlay .wrong-info-shell::after {
    content: "🔎" !important;

    bottom: 13% !important;
    left: 5% !important;

    animation-delay:
        -2.5s !important;
}

@keyframes wrongInfoBgFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg)
            scale(1);
    }

    50% {
        transform:
            translateY(-16px)
            rotate(5deg)
            scale(1.08);
    }
}


/* ==========================================
   الصندوق الرئيسي أصغر
========================================== */

#wrong-info-overlay
.wrong-info-shell {
    width:
        min(1120px, 91vw) !important;

    height:
        min(690px, 87vh) !important;

    padding:
        14px 20px 12px !important;

    gap:
        8px !important;

    border-radius:
        26px !important;

    overflow:
        hidden !important;
}


/* ==========================================
   العنوان أصغر
========================================== */

#wrong-info-overlay
.wrong-info-header {
    margin:
        0 !important;

    padding:
        0 !important;
}

#wrong-info-overlay
.wrong-info-header h2 {
    font-size:
        31px !important;

    margin:
        0 !important;
}

#wrong-info-overlay
.wrong-info-header p {
    font-size:
        14px !important;

    margin:
        3px 0 0 !important;
}


/* ==========================================
   المحتوى
========================================== */

#wrong-info-overlay
.wrong-info-content {
    grid-template-columns:
        37% 1fr !important;

    gap:
        18px !important;

    min-height:
        0 !important;
}


/* ==========================================
   الصورة أصغر
========================================== */

#wrong-info-image {
    height:
        min(390px, 49vh) !important;

    border-radius:
        20px !important;
}

#wrong-info-title {
    font-size:
        23px !important;

    padding:
        7px 18px !important;

    margin:
        3px 0 0 !important;

    border-radius:
        14px !important;
}


/* ==========================================
   بطاقات المعلومات أصغر
========================================== */

#wrong-info-overlay
.wrong-info-statements {
    gap:
        10px !important;
}

#wrong-info-overlay
.wrong-info-statement {
    min-height:
        68px !important;

    padding:
        10px 15px !important;

    gap:
        12px !important;

    border-radius:
        17px !important;
}

#wrong-info-overlay
.wrong-info-number {
    width:
        44px !important;

    height:
        44px !important;

    border-radius:
        13px !important;

    font-size:
        19px !important;
}

#wrong-info-overlay
.wrong-info-text {
    font-size:
        18px !important;

    line-height:
        1.35 !important;
}


/* ==========================================
   زر إظهار الإجابة أصغر ولا يتداخل
========================================== */

#wrong-info-show-answer {
    min-width:
        255px !important;

    padding:
        11px 22px !important;

    margin:
        2px auto 0 !important;

    border-radius:
        15px !important;

    font-size:
        17px !important;

    flex-shrink:
        0 !important;
}


/* ==========================================
   المؤقت أصغر وفي الزاوية
========================================== */

#wrong-info-timer-box {
    top:
        16px !important;

    left:
        16px !important;

    width:
        122px !important;

    min-height:
        122px !important;

    padding:
        10px !important;

    border-radius:
        22px !important;
}

.wrong-info-timer-label {
    font-size:
        11px !important;
}

#wrong-info-time {
    font-size:
        40px !important;
}

.wrong-info-timer-seconds {
    font-size:
        11px !important;
}

.wrong-info-current-team {
    margin-top:
        6px !important;

    padding-top:
        6px !important;

    font-size:
        12px !important;
}


/* ==========================================
   أزرار التحكيم أصغر
========================================== */

.wrong-info-judge-buttons {
    width:
        min(650px, 80vw) !important;

    gap:
        10px !important;

    margin:
        4px auto 0 !important;
}

.wrong-info-judge-button {
    min-width:
        155px !important;

    padding:
        10px 15px !important;

    border-radius:
        15px !important;

    font-size:
        16px !important;
}
/* ==========================================
   فئة رتّبها صح
========================================== */

.sequence-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(90, 110, 255, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(255, 94, 150, 0.16),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #0f1428,
            #1a1736 58%,
            #24142e
        );

    overflow: hidden;
}

.sequence-overlay.hidden {
    display: none !important;
}

.sequence-shell {
    width: min(980px, 92vw);

    padding: 22px 26px;

    border-radius: 28px;

    background:
        rgba(21, 25, 48, 0.96);

    border:
        1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 22px 60px rgba(0,0,0,0.38);

    display: flex;
    flex-direction: column;

    gap: 18px;
}

.sequence-header {
    text-align: center;
}

.sequence-header h2 {
    margin: 0;

    font-size: 34px;
    font-weight: 900;

    color: #ffffff;
}

.sequence-header p {
    margin: 5px 0 0;

    font-size: 16px;
    font-weight: 700;

    color: rgba(255,255,255,0.72);
}

.sequence-instruction {
    text-align: center;

    padding: 14px 18px;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.07);

    border:
        1px solid rgba(255,255,255,0.10);

    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
}

.sequence-items {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.sequence-item {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(72, 76, 132, 0.92),
            rgba(49, 45, 96, 0.92)
        );

    border:
        1px solid rgba(255,255,255,0.12);

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.sequence-item:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.24);
}

.sequence-show-answer {
    align-self: center;

    min-width: 250px;

    padding: 13px 22px;

    border: none;
    border-radius: 17px;

    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    color: #1c2033;

    background:
        linear-gradient(
            135deg,
            #ffd86a,
            #ffb52d
        );
}

.sequence-correct-order {
    padding: 16px 18px;

    border-radius: 18px;

    background:
        rgba(75, 210, 140, 0.12);

    border:
        1px solid rgba(75, 210, 140, 0.34);

    color: #ffffff;

    text-align: center;

    font-size: 20px;
    font-weight: 900;
}

.sequence-correct-order.hidden {
    display: none !important;
}
.sequence-item.is-selected {
    position: relative;

    border:
        2px solid rgba(255, 215, 90, 0.95);

    background:
        linear-gradient(
            145deg,
            rgba(98, 76, 150, 0.98),
            rgba(62, 48, 112, 0.98)
        );

    box-shadow:
        0 0 0 4px rgba(255, 215, 90, 0.10),
        0 10px 25px rgba(0,0,0,0.25);
}

.sequence-order-number {
    position: absolute;

    top: 8px;
    right: 10px;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffd75a;
    color: #1c2033;

    font-size: 16px;
    font-weight: 900;
}

.sequence-item-text {
    display: block;
    width: 100%;

    text-align: center;
}
.sequence-item {
    position: relative;
    padding-right: 70px;
}

.sequence-letter {
    position: absolute;

    right: 16px;
    top: 50%;
    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffd86a,
            #ffb52d
        );

    color: #1b2033;

    font-size: 20px;
    font-weight: 900;

    box-shadow:
        0 5px 14px rgba(0,0,0,0.25);
}

.sequence-item-text {
    width: 100%;
    text-align: center;
}
/* ==========================================
   أشكال متحركة لخلفية رتّبها صح
========================================== */

.sequence-overlay::before,
.sequence-overlay::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.02) 55%,
            transparent 70%
        );

    filter: blur(2px);

    pointer-events: none;

    animation:
        sequenceFloat 8s ease-in-out infinite;
}

.sequence-overlay::before {
    top: 8%;
    right: 6%;
}

.sequence-overlay::after {
    bottom: 8%;
    left: 6%;

    width: 170px;
    height: 170px;

    animation-delay: -4s;
}

@keyframes sequenceFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translateY(-28px)
            rotate(12deg)
            scale(1.08);
    }
}

/* رموز خفيفة بالخلفية */

.sequence-shell::before {
    content: "1  2  3  4";

    position: absolute;

    top: -38px;
    left: 50%;

    transform:
        translateX(-50%)
        rotate(-6deg);

    font-size: 70px;
    font-weight: 900;

    letter-spacing: 22px;

    color:
        rgba(255,255,255,0.035);

    white-space: nowrap;

    pointer-events: none;

    animation:
        sequenceNumbersMove
        10s ease-in-out infinite;
}

.sequence-shell {
    position: relative;
    z-index: 2;
}

@keyframes sequenceNumbersMove {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(-6deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(18px)
            rotate(4deg);
    }
}
/* ==========================================
   خلفية فخمة ومتطورة لفئة رتّبها صح
========================================== */

.sequence-overlay {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(87, 123, 255, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(190, 84, 255, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(255, 183, 77, 0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #080d1f 0%,
            #11172f 45%,
            #1e1534 100%
        ) !important;

    isolation: isolate;
}

/* طبقة زخارف متحركة */
.sequence-overlay::before {
    content: "A   B   C   D   ↔   1   2   3   4   ⇄   ✓";

    position: absolute;

    width: 140%;

    top: 9%;
    left: -20%;

    font-size: 48px;
    font-weight: 900;

    letter-spacing: 24px;

    color:
        rgba(255,255,255,0.045);

    white-space: nowrap;

    pointer-events: none;

    animation:
        sequenceBackgroundMove
        18s linear infinite;

    z-index: 0;
}

.sequence-overlay::after {
    content: "⇢   ⇠   ↕   🔢   ✓   ↔   A   D   2   4";

    position: absolute;

    width: 140%;

    bottom: 8%;
    right: -20%;

    font-size: 44px;
    font-weight: 900;

    letter-spacing: 28px;

    color:
        rgba(255, 213, 90, 0.045);

    white-space: nowrap;

    pointer-events: none;

    animation:
        sequenceBackgroundMoveReverse
        22s linear infinite;

    z-index: 0;
}

@keyframes sequenceBackgroundMove {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(22%);
    }
}

@keyframes sequenceBackgroundMoveReverse {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-22%);
    }
}

/* صندوق السؤال */

.sequence-shell {
    position: relative;

    z-index: 2;

    background:
        linear-gradient(
            145deg,
            rgba(20, 26, 53, 0.96),
            rgba(36, 28, 69, 0.96)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.14) !important;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.45),
        inset 0 1px 0
        rgba(255,255,255,0.06);

    backdrop-filter:
        blur(14px);
}

/* عنوان الفئة */

.sequence-header h2 {
    font-size: 38px !important;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #ffd86a,
            #ffffff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;

    text-shadow:
        0 5px 25px
        rgba(255, 205, 80, 0.16);
}

/* صندوق التعليمات */

.sequence-instruction {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.035)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.12) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.05);
}

/* الخيارات */

.sequence-item {
    background:
        linear-gradient(
            145deg,
            rgba(65, 72, 130, 0.95),
            rgba(44, 40, 92, 0.95)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.12) !important;

    box-shadow:
        0 10px 24px
        rgba(0,0,0,0.22);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.sequence-item:hover {
    transform:
        translateY(-4px)
        scale(1.015);

    border-color:
        rgba(255, 215, 90, 0.6) !important;

    box-shadow:
        0 16px 32px
        rgba(0,0,0,0.30),
        0 0 18px
        rgba(255, 215, 90, 0.08);
}

/* حروف A B C D */

.sequence-letter {
    background:
        linear-gradient(
            135deg,
            #ffe27a,
            #ffb832
        ) !important;

    box-shadow:
        0 6px 18px
        rgba(255, 184, 50, 0.28);
}

/* زر إظهار الإجابة */

.sequence-show-answer {
    background:
        linear-gradient(
            135deg,
            #ffd86a,
            #ffad2f
        ) !important;

    box-shadow:
        0 10px 25px
        rgba(255, 178, 40, 0.25);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.sequence-show-answer:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 15px 30px
        rgba(255, 178, 40, 0.35);
}

/* صندوق الإجابة */

.sequence-correct-order {
    background:
        linear-gradient(
            135deg,
            rgba(63, 208, 140, 0.16),
            rgba(45, 160, 120, 0.09)
        ) !important;

    border:
        1px solid
        rgba(76, 225, 155, 0.38) !important;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,0.22);
}

.sequence-answer-title {
    margin-bottom: 10px;

    font-size: 18px;

    color: #6dffb6;
}

.sequence-answer-items {
    font-size: 24px;
    line-height: 1.7;

    color: #ffffff;
}
/* ==========================================
   تقوية وضوح الأشكال المتحركة
========================================== */

.sequence-overlay::before {
content: "A   B   C   D   ↔   1   2   3   4   ⇄   ✓   ★";
    font-size: 56px !important;

    text-shadow:
        0 0 12px rgba(255,255,255,0.10);

    opacity: 1 !important;
}

.sequence-overlay::after {
content: "🔢   ↕   ⇢   ⇠   ✓   ★   A   D   2   4";
    font-size: 52px !important;

    text-shadow:
        0 0 14px rgba(255, 200, 80, 0.12);

    opacity: 1 !important;
}
.sequence-judge-buttons {
    display: grid;
    grid-template-columns:
        1fr
        0.85fr
        1fr;

    gap: 14px;

    margin-top: 6px;
}

.sequence-judge-buttons.hidden {
    display: none !important;
}

.sequence-judge-button {
    min-height: 58px;

    border: none;
    border-radius: 18px;

    padding: 12px 18px;

    font-size: 18px;
    font-weight: 900;

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(72, 82, 145, 0.98),
            rgba(42, 46, 98, 0.98)
        );

    border:
        1px solid rgba(255,255,255,0.14);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.24);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.sequence-judge-button:hover {
    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.30);
}

#sequence-team1-button {
    order: 3;

    background:
        linear-gradient(
            135deg,
            #ff5b63,
            #d9364f
        );
}

#sequence-none-button {
    order: 2;

    background:
        linear-gradient(
            135deg,
            #5f687e,
            #3f4659
        );
}

#sequence-team2-button {
    order: 1;

    background:
        linear-gradient(
            135deg,
            #43c97c,
            #219e5a
        );
}
.sequence-header h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.sequence-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 54px;
    height: 38px;

    padding: 0 10px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #ffd86a,
            #ffad2f
        );

    color: #1b2033;

    font-size: 18px;
    font-weight: 900;

    box-shadow:
        0 6px 18px
        rgba(255, 180, 50, 0.28);
}
/* ==========================================
   مؤقت فئة رتّبها صح
========================================== */

.sequence-timer-box {
    position: fixed !important;

    top: 20px !important;
    left: 22px !important;

    z-index: 13000 !important;

    width: 132px !important;
    min-height: 132px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 2px !important;

    padding: 12px !important;

    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(20, 27, 56, 0.98),
            rgba(43, 28, 72, 0.98)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,0.14) !important;

    box-shadow:
        0 16px 36px
        rgba(0,0,0,0.38) !important;

    color: #ffffff !important;
}

.sequence-timer-label {
    font-size: 13px;
    font-weight: 800;

    color:
        rgba(255,255,255,0.70);
}

#sequence-time {
    font-size: 42px;
    line-height: 1;

    font-weight: 900;

    color: #ffd75a;
}

.sequence-timer-seconds {
    font-size: 12px;

    color:
        rgba(255,255,255,0.62);
}

.sequence-current-team {
    margin-top: 5px;

    max-width: 110px;

    text-align: center;

    font-size: 14px;
    font-weight: 900;

    color: #ffffff;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sequence-timer-box.hidden {
    display: none !important;
}
#sequence-timer-box.is-warning {
    border:
        2px solid rgba(255, 75, 75, 0.95) !important;

    box-shadow:
        0 0 0 4px rgba(255, 75, 75, 0.12),
        0 0 30px rgba(255, 45, 45, 0.48),
        0 15px 35px rgba(0, 0, 0, 0.35) !important;

    animation:
        sequenceTimerPulse
        0.7s ease-in-out infinite !important;
}

#sequence-timer-box.is-warning #sequence-time {
    color: #ff4d4d !important;
}

@keyframes sequenceTimerPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}
/* ==========================================
   صاحب الظل الطويل - صورة السؤال في البازل
========================================== */

.normal-question-image {
    display: block;
    width: min(100%, 520px);
    max-height: 430px;
    object-fit: contain;

    margin: 18px auto;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 24, 58, 0.96),
            rgba(24, 12, 70, 0.96)
        );

    border:
        2px solid rgba(117, 210, 255, 0.42);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(80, 188, 255, 0.15);
}

.normal-question-image.hidden {
    display: none !important;
}
/* ==========================================
   صاحب الظل الطويل - صورة الإجابة الملونة
========================================== */

.normal-answer-image {
    display: block;
    width: min(100%, 520px);
    max-height: 430px;
    object-fit: contain;

    margin: 18px auto 0;

    border-radius: 18px;

    border:
        2px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.30);
}

.normal-answer-image.hidden {
    display: none !important;
}
/* ==========================================
   صاحب الظل الطويل - نافذة خاصة
========================================== */

.silhouette-question-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(3, 10, 28, 0.88);
    backdrop-filter: blur(8px);
}

.silhouette-question-overlay.hidden {
    display: none !important;
}

.silhouette-question-card {
    width: min(92vw, 900px);
    max-height: 90vh;

    padding: 28px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 36, 88, 0.98),
            rgba(28, 17, 88, 0.98)
        );

    border: 3px solid #f7c948;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45);

    text-align: center;

    overflow-y: auto;
}

.silhouette-question-title {
    font-size: 30px;
    font-weight: 900;

    color: #ffd84d;

    margin-bottom: 12px;
}

.silhouette-question-text {
    font-size: 34px;
    font-weight: 900;

    color: #ffffff;

    margin-bottom: 22px;
}

.silhouette-question-image,
.silhouette-answer-image {
    display: block;

    width: min(100%, 560px);
    max-height: 480px;

    object-fit: contain;

    margin: 0 auto 22px;

    border-radius: 22px;

    background: rgba(4, 12, 35, 0.75);

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.38);
}

.silhouette-show-answer {
    min-width: 260px;

    padding: 14px 28px;

    border: none;
    border-radius: 16px;

    font-size: 22px;
    font-weight: 900;

    cursor: pointer;
}

.silhouette-answer-area.hidden {
    display: none !important;
}

.silhouette-answer-text {
    font-size: 34px;
    font-weight: 900;

    color: #ffd84d;

    margin-top: 8px;
}

/* صاحب الظل الطويل - ملء الشاشة بدون سكرول */
#silhouette-question-overlay {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

#silhouette-question-overlay.hidden {
    display: none !important;
}

#silhouette-question-overlay .silhouette-question-card {
    width: 100vw;
    height: 100vh;

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    border-radius: 0;

    overflow: hidden !important;
}
/* صاحب الظل الطويل - اسم الفريق والمؤقت أعلى اليسار */

.silhouette-top-left {
    position: absolute;

    top: 24px;
    left: 24px;

    z-index: 20;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    min-width: 150px;

    padding: 12px 18px;

    border-radius: 18px;

    background:
        rgba(5, 24, 66, 0.92);

    border:
        2px solid rgba(64, 184, 255, 0.72);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32);
}

.silhouette-team-name {
    font-size: 18px;
    font-weight: 900;

    color: #ffd84d;
}

.silhouette-timer {
    font-size: 38px;
    line-height: 1;
    font-weight: 950;

    color: #ffffff;
}
/* صاحب الظل الطويل - أشكال متحركة بالخلفية */

.silhouette-bg-shapes {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}

.silhouette-bg-shapes span {
    position: absolute;

    width: 90px;
    height: 90px;

    border: 2px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;

    background:
        rgba(70, 160, 255, 0.06);

    animation:
        silhouetteFloat 14s ease-in-out infinite;
}

.silhouette-bg-shapes span:nth-child(1) {
    left: 8%;
    top: 18%;
}

.silhouette-bg-shapes span:nth-child(2) {
    left: 24%;
    top: 70%;
    animation-delay: -3s;
}

.silhouette-bg-shapes span:nth-child(3) {
    left: 45%;
    top: 12%;
    animation-delay: -6s;
}

.silhouette-bg-shapes span:nth-child(4) {
    left: 62%;
    top: 72%;
    animation-delay: -9s;
}

.silhouette-bg-shapes span:nth-child(5) {
    left: 78%;
    top: 20%;
    animation-delay: -5s;
}

.silhouette-bg-shapes span:nth-child(6) {
    left: 90%;
    top: 58%;
    animation-delay: -11s;
}

@keyframes silhouetteFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-55px)
            rotate(18deg);
    }
}

/* إبقاء محتوى الفئة فوق الخلفية */
.silhouette-question-card {
    position: relative;
    z-index: 2;
}
/* صاحب الظل الطويل - ترتيب صور الإجابة جنب بعض */

#silhouette-answer-area {
    width: 100%;
    text-align: center;
}

#silhouette-answer-area .silhouette-answer-image {
    display: inline-block;
    vertical-align: middle;

    width: min(42vw, 430px);
    max-height: 420px;

    object-fit: contain;

    margin: 0 12px 18px;

    border-radius: 20px;
}

#silhouette-answer-text {
    display: block;

    margin-top: 4px;

    font-size: 34px;
    font-weight: 900;
}
/* صاحب الظل الطويل - أزرار التحكيم */

.silhouette-judgement-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 18px;

    margin-top: 18px;

    direction: rtl;
}

.silhouette-judge-button {
    min-width: 180px;

    padding: 14px 24px;

    border: none;
    border-radius: 16px;

    font-size: 20px;
    font-weight: 900;

    cursor: pointer;
}

#silhouette-first-team {
    order: 1;
}

#silhouette-no-team {
    order: 2;
}

#silhouette-second-team {
    order: 3;
}
/* صاحب الظل الطويل - صفحة الإجابة كاملة */

#silhouette-answer-area {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 90px 40px 40px;

    box-sizing: border-box;

    overflow: hidden;
}

#silhouette-answer-area.hidden {
    display: none !important;
}

#silhouette-answer-area .silhouette-answer-image {
    width: min(38vw, 430px);
    max-height: 360px;

    object-fit: contain;

    margin: 0 14px 16px;
}

#silhouette-answer-area {
    text-align: center;
}

#silhouette-answer-area > img {
    display: inline-block;
}

#silhouette-answer-text {
    font-size: 34px;
    font-weight: 900;

    margin-top: 10px;
    margin-bottom: 18px;
}

.silhouette-judgement-buttons {
    margin-top: 14px;
}
/* صاحب الظل الطويل - زر إظهار الإجابة */

#silhouette-show-answer {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 260px;
    height: 58px;

    margin: 18px auto 0;

    padding: 0 34px;

    border: 2px solid rgba(255, 216, 77, 0.9);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f7c948,
            #ff9f1a
        );

    box-shadow:
        0 14px 30px rgba(255, 166, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    color: #102653;

    font-size: 22px;
    font-weight: 950;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#silhouette-show-answer:hover {
    transform: translateY(-3px) scale(1.02);

    box-shadow:
        0 18px 36px rgba(255, 166, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#silhouette-show-answer:active {
    transform: translateY(0) scale(0.98);
}
/* صاحب الظل الطويل - تحسين صندوق المؤقت واسم الفريق */

.silhouette-top-left {
    top: 26px;
    left: 26px;

    min-width: 190px;

    padding: 14px 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 29, 76, 0.96),
            rgba(20, 45, 110, 0.96)
        );

    border:
        2px solid rgba(67, 190, 255, 0.72);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(71, 182, 255, 0.14);
}

#silhouette-team-name {
    font-size: 17px;
    font-weight: 900;

    color: #ffd84d;

    margin-bottom: 4px;
}

#silhouette-timer {
    font-size: 46px;
    line-height: 1;
    font-weight: 950;

    color: #ffffff;

    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.12);
}
/* صاحب الظل الطويل - ترتيب صفحة السؤال */

#silhouette-question-overlay .silhouette-question-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#silhouette-question-overlay .silhouette-question-text {
    margin: 0 0 14px;

    font-size: 38px;
    font-weight: 950;

    color: #ffffff;

    text-shadow:
        0 4px 14px rgba(0, 0, 0, 0.28);
}

#silhouette-question-overlay .silhouette-question-image {
    width: min(36vw, 430px);
    max-height: 410px;

    margin: 0 auto 12px;

    object-fit: contain;

    border-radius: 24px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(85, 155, 255, 0.10);
}
/* صاحب الظل الطويل - خلفية متحركة أوضح */

#silhouette-question-overlay {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(55, 125, 255, 0.22),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(155, 80, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #06172f,
            #102b5d 48%,
            #24135c
        );
}

.silhouette-bg-shapes span {
    width: 110px;
    height: 110px;

    border-radius: 28px;

    border:
        2px solid rgba(105, 198, 255, 0.24);

    background:
        linear-gradient(
            145deg,
            rgba(45, 140, 255, 0.12),
            rgba(138, 80, 255, 0.10)
        );

    box-shadow:
        0 0 28px rgba(75, 170, 255, 0.12);

    opacity: 0.75;

    animation:
        silhouetteFloat 10s ease-in-out infinite;
}

.silhouette-bg-shapes span:nth-child(2),
.silhouette-bg-shapes span:nth-child(5) {
    border-radius: 50%;
}

.silhouette-bg-shapes span:nth-child(3),
.silhouette-bg-shapes span:nth-child(6) {
    transform: rotate(45deg);
}
/* صاحب الظل الطويل - تحسين أزرار التحكيم */

.silhouette-judgement-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 18px;

    margin-top: 20px;

    direction: rtl;
}

.silhouette-judge-button {
    min-width: 190px;
    height: 58px;

    padding: 0 26px;

    border: 0;
    border-radius: 18px;

    font-size: 21px;
    font-weight: 950;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28);
}

#silhouette-first-team {
    background:
        linear-gradient(
            135deg,
            #21c778,
            #0e9f5f
        );

    color: #ffffff;
}

#silhouette-no-team {
    background:
        linear-gradient(
            135deg,
            #f3c846,
            #e59b17
        );

    color: #17213c;
}

#silhouette-second-team {
    background:
        linear-gradient(
            135deg,
            #ef5c6c,
            #cf3348
        );

    color: #ffffff;
}

.silhouette-judge-button:hover {
    transform: translateY(-3px) scale(1.02);

    filter: brightness(1.06);

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.34);
}

.silhouette-judge-button:active {
    transform: scale(0.98);
}
/* صاحب الظل الطويل - مؤثر ظهور الصورة الملونة */

#silhouette-answer-image {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(10px) brightness(0.75);

    animation:
        silhouetteAnswerReveal 900ms
        cubic-bezier(.2,.8,.2,1)
        forwards;

    position: relative;
}

@keyframes silhouetteAnswerReveal {

    0% {
        opacity: 0;
        transform: scale(0.88);
        filter: blur(10px) brightness(0.75);
    }

    55% {
        opacity: 1;
        transform: scale(1.04);
        filter: blur(2px) brightness(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* لمعة تمر فوق الصورة */
#silhouette-answer-area {
    position: relative;
}

#silhouette-answer-area::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 70%;

    top: 12%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );

    transform: skewX(-18deg);

    opacity: 0;

    pointer-events: none;

    animation:
        silhouetteAnswerShine 1.1s ease
        250ms forwards;
}

@keyframes silhouetteAnswerShine {

    0% {
        left: 15%;
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        left: 75%;
        opacity: 0;
    }
}
/* =========================================================
   صاحب الظل الطويل
   التصميم النهائي السينمائي - سؤال + إجابة
========================================================= */


/* =========================
   الشاشة الرئيسية
========================= */

#silhouette-question-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(18, 126, 255, 0.28),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(142, 65, 255, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(0, 210, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #020b1d 0%,
            #081c43 40%,
            #14245c 68%,
            #200d4c 100%
        ) !important;
}

#silhouette-question-overlay.hidden {
    display: none !important;
}


/* مهم جدًا:
   الصندوق القديم كان يغطي الخلفية،
   نخليه الآن شفافًا بالكامل
*/

#silhouette-question-overlay .silhouette-question-card {
    position: relative !important;

    z-index: 5 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================
   إضاءة خلفية سينمائية
========================= */

#silhouette-question-overlay::before {
    content: "";

    position: absolute;

    width: 680px;
    height: 680px;

    left: 50%;
    top: 52%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(53, 152, 255, 0.18),
            rgba(82, 73, 255, 0.08) 42%,
            transparent 70%
        );

    filter: blur(12px);

    animation:
        silhouetteAuraPulse
        4s ease-in-out infinite;

    pointer-events: none;
}

@keyframes silhouetteAuraPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(0.92);

        opacity: 0.65;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================
   أشكال الخلفية المتحركة
========================= */

.silhouette-bg-shapes {
    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;

    overflow: hidden !important;

    pointer-events: none !important;
}

.silhouette-bg-shapes span {
    position: absolute !important;

    width: 100px !important;
    height: 100px !important;

    opacity: 0.32 !important;

    border:
        2px solid
        rgba(113, 205, 255, 0.38) !important;

    background:
        linear-gradient(
            145deg,
            rgba(70, 165, 255, 0.16),
            rgba(151, 72, 255, 0.08)
        ) !important;

    box-shadow:
        0 0 35px
        rgba(62, 165, 255, 0.16) !important;

    animation:
        silhouetteLuxuryFloat
        12s ease-in-out infinite !important;
}

.silhouette-bg-shapes span:nth-child(1) {
    left: 5% !important;
    top: 16% !important;

    border-radius: 50% !important;
}

.silhouette-bg-shapes span:nth-child(2) {
    left: 18% !important;
    top: 72% !important;

    width: 70px !important;
    height: 70px !important;

    transform: rotate(45deg);

    animation-delay: -3s !important;
}

.silhouette-bg-shapes span:nth-child(3) {
    left: 42% !important;
    top: 7% !important;

    width: 58px !important;
    height: 58px !important;

    clip-path:
        polygon(
            50% 0%,
            100% 100%,
            0% 100%
        );

    animation-delay: -7s !important;
}

.silhouette-bg-shapes span:nth-child(4) {
    right: 8% !important;
    top: 18% !important;

    width: 125px !important;
    height: 125px !important;

    border-radius: 34px !important;

    animation-delay: -5s !important;
}

.silhouette-bg-shapes span:nth-child(5) {
    right: 20% !important;
    bottom: 8% !important;

    width: 82px !important;
    height: 82px !important;

    border-radius: 50% !important;

    animation-delay: -9s !important;
}

.silhouette-bg-shapes span:nth-child(6) {
    left: 63% !important;
    top: 62% !important;

    width: 54px !important;
    height: 54px !important;

    transform: rotate(45deg);

    animation-delay: -11s !important;
}

@keyframes silhouetteLuxuryFloat {

    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;

        opacity: 0.22;
    }

    50% {
        translate: 0 -55px;
        rotate: 18deg;

        opacity: 0.48;
    }
}


/* =========================
   المؤقت + اسم الفريق
========================= */

#silhouette-question-overlay
.silhouette-top-left {

    position: absolute !important;

    top: 24px !important;
    left: 26px !important;

    z-index: 30 !important;

    min-width: 175px !important;

    padding:
        11px 17px 13px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 5px !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 25, 61, 0.90),
            rgba(13, 42, 92, 0.82)
        ) !important;

    border:
        1px solid
        rgba(113, 205, 255, 0.55) !important;

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, 0.38),
        0 0 26px
        rgba(62, 170, 255, 0.12) !important;

    backdrop-filter:
        blur(14px) !important;
}

#silhouette-team-name {
    font-size: 17px !important;
    font-weight: 900 !important;

    color: #ffe176 !important;
}

#silhouette-timer {
    font-size: 43px !important;
    line-height: 1 !important;

    font-weight: 950 !important;

    color: #ffffff !important;

    text-shadow:
        0 0 18px
        rgba(74, 183, 255, 0.42) !important;
}

.silhouette-top-left.hidden {
    display: none !important;
}


/* =========================
   سؤال: من صاحب هذا الظل؟
========================= */

#silhouette-question-overlay
.silhouette-question-text {

    position: relative !important;

    z-index: 10 !important;

    margin:
        -6px 0 17px !important;

    font-size:
        clamp(
            31px,
            3vw,
            44px
        ) !important;

    font-weight: 950 !important;

    color: #ffffff !important;

    letter-spacing:
        0.3px !important;

    text-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.42) !important;

    animation:
        silhouetteQuestionEnter
        700ms
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes silhouetteQuestionEnter {

    from {
        opacity: 0;
        transform:
            translateY(-18px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


/* =========================
   صورة الظل
========================= */

#silhouette-question-image {

    position: relative !important;

    z-index: 10 !important;

    display: block !important;

    width:
        min(31vw, 400px) !important;

    max-height:
        390px !important;

    object-fit:
        contain !important;

    margin:
        0 auto 16px !important;

    padding:
        8px !important;

    border-radius:
        27px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.025)
        ) !important;

    border:
        1px solid
        rgba(128, 209, 255, 0.52) !important;

    box-shadow:
        0 26px 65px
        rgba(0, 0, 0, 0.46),
        0 0 45px
        rgba(49, 160, 255, 0.17) !important;

    backdrop-filter:
        blur(8px);

    animation:
        silhouetteShadowEnter
        850ms
        cubic-bezier(.16,.84,.28,1)
        both;
}

@keyframes silhouetteShadowEnter {

    from {
        opacity: 0;

        transform:
            translateY(28px)
            scale(0.91);

        filter:
            blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);
    }
}


/* هالة خلف صورة الظل */

#silhouette-question-image:hover {
    transform:
        translateY(-4px)
        scale(1.012);

    box-shadow:
        0 32px 78px
        rgba(0, 0, 0, 0.50),
        0 0 55px
        rgba(66, 171, 255, 0.24) !important;
}


/* =========================
   زر إظهار الإجابة
========================= */

#silhouette-show-answer {

    position: relative !important;

    z-index: 12 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 260px !important;
    height: 57px !important;

    margin:
        0 auto !important;

    padding:
        0 34px !important;

    border:
        1px solid
        rgba(255, 232, 140, 0.85) !important;

    border-radius:
        19px !important;

    background:
        linear-gradient(
            135deg,
            #ffe77a 0%,
            #f8bd37 50%,
            #f09419 100%
        ) !important;

    color:
        #13234d !important;

    font-size:
        21px !important;

    font-weight:
        950 !important;

    box-shadow:
        0 15px 34px
        rgba(242, 164, 25, 0.30),
        inset 0 1px 0
        rgba(255, 255, 255, 0.65) !important;

    cursor: pointer !important;

    overflow: hidden !important;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease !important;

    animation:
        silhouetteButtonEnter
        850ms 180ms
        cubic-bezier(.2,.8,.2,1)
        both;
}


/* لمعة على الزر */

#silhouette-show-answer::before {

    content: "";

    position: absolute;

    top: -30%;
    left: -80px;

    width: 52px;
    height: 160%;

    background:
        rgba(255, 255, 255, 0.48);

    transform:
        skewX(-22deg);

    filter:
        blur(3px);

    animation:
        silhouetteButtonShine
        3.2s ease-in-out infinite;
}

@keyframes silhouetteButtonShine {

    0%,
    55% {
        left: -100px;
        opacity: 0;
    }

    65% {
        opacity: 0.8;
    }

    82% {
        left: calc(100% + 100px);
        opacity: 0;
    }

    100% {
        left: calc(100% + 100px);
        opacity: 0;
    }
}

@keyframes silhouetteButtonEnter {

    from {
        opacity: 0;
        transform:
            translateY(20px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

#silhouette-show-answer:hover {

    transform:
        translateY(-4px)
        scale(1.025) !important;

    box-shadow:
        0 20px 42px
        rgba(243, 169, 27, 0.40),
        0 0 24px
        rgba(255, 211, 73, 0.16) !important;
}


/* =========================================================
   صفحة الإجابة
========================================================= */

#silhouette-answer-area {

    position: absolute !important;

    inset: 0 !important;

    z-index: 20 !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing:
        border-box !important;

    padding:
        42px 70px 28px !important;

    overflow:
        hidden !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(260px, 420px)
        minmax(260px, 420px) !important;

    grid-template-rows:
        1fr auto auto !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    column-gap:
        34px !important;

    row-gap:
        12px !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(66, 159, 255, 0.13),
            transparent 40%
        ) !important;
}

#silhouette-answer-area.hidden {
    display:
        none !important;
}


/* =========================
   الصورتان جنب بعض
========================= */

#silhouette-answer-shadow-image,
#silhouette-answer-image {

    display:
        block !important;

    width:
        100% !important;

    height:
        min(55vh, 420px) !important;

    max-width:
        420px !important;

    max-height:
        420px !important;

    object-fit:
        contain !important;

    margin:
        0 !important;

    padding:
        9px !important;

    border-radius:
        28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.025)
        ) !important;

    border:
        1px solid
        rgba(127, 204, 255, 0.42) !important;

    box-shadow:
        0 24px 58px
        rgba(0, 0, 0, 0.42) !important;
}


/* الظل يدخل من اليسار */

#silhouette-answer-shadow-image {

    grid-column:
        1 !important;

    grid-row:
        1 !important;

    animation:
        silhouetteShadowResult
        650ms
        cubic-bezier(.2,.8,.2,1)
        both !important;
}

@keyframes silhouetteShadowResult {

    from {
        opacity: 0;

        transform:
            translateX(-45px)
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


/* =========================
   الصورة الملونة Reveal
========================= */

#silhouette-answer-image {

    grid-column:
        2 !important;

    grid-row:
        1 !important;

    opacity: 0;

    animation:
        silhouetteColorReveal
        1050ms
        180ms
        cubic-bezier(.15,.85,.2,1)
        forwards !important;
}

@keyframes silhouetteColorReveal {

    0% {
        opacity: 0;

        transform:
            scale(0.82)
            rotateY(12deg);

        filter:
            blur(15px)
            brightness(0.55)
            saturate(0.5);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.045)
            rotateY(0);

        filter:
            blur(2px)
            brightness(1.18)
            saturate(1.15);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotateY(0);

        filter:
            blur(0)
            brightness(1)
            saturate(1);
    }
}


/* =========================
   اسم الشخصية
========================= */

#silhouette-answer-text {

    grid-column:
        1 / -1 !important;

    grid-row:
        2 !important;

    margin:
        2px 0 3px !important;

    padding:
        10px 30px !important;

    font-size:
        clamp(
            27px,
            2.5vw,
            38px
        ) !important;

    font-weight:
        950 !important;

    color:
        #ffe16b !important;

    text-align:
        center !important;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.42),
        0 0 18px
        rgba(255, 205, 64, 0.18) !important;

    animation:
        silhouetteNameReveal
        650ms 550ms
        ease both;
}

@keyframes silhouetteNameReveal {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================
   أزرار التحكيم
========================= */

#silhouette-judgement-buttons {

    grid-column:
        1 / -1 !important;

    grid-row:
        3 !important;

    display:
        flex !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    gap:
        16px !important;

    margin:
        0 !important;

    direction:
        rtl !important;

    animation:
        silhouetteJudgementEnter
        650ms 700ms
        ease both;
}

@keyframes silhouetteJudgementEnter {

    from {
        opacity: 0;
        transform:
            translateY(22px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

.silhouette-judge-button {

    position:
        relative !important;

    min-width:
        185px !important;

    height:
        56px !important;

    padding:
        0 24px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.22) !important;

    border-radius:
        18px !important;

    font-size:
        20px !important;

    font-weight:
        950 !important;

    color:
        #ffffff !important;

    cursor:
        pointer !important;

    box-shadow:
        0 13px 30px
        rgba(0, 0, 0, 0.30) !important;

    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        filter 170ms ease !important;
}


/* الفريق الأول */

#silhouette-first-team {
    background:
        linear-gradient(
            135deg,
            #25d186,
            #079c62
        ) !important;
}


/* لا أحد */

#silhouette-no-team {
    background:
        linear-gradient(
            135deg,
            #f6c74e,
            #d98f14
        ) !important;

    color:
        #17233f !important;
}


/* الفريق الثاني */

#silhouette-second-team {
    background:
        linear-gradient(
            135deg,
            #f46176,
            #ce304c
        ) !important;
}


.silhouette-judge-button:hover {

    transform:
        translateY(-4px)
        scale(1.025) !important;

    filter:
        brightness(1.08) !important;

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.38) !important;
}

.silhouette-judge-button:active {

    transform:
        translateY(0)
        scale(0.97) !important;
}


/* =========================
   لمعة لحظة كشف الإجابة
========================= */

#silhouette-answer-area::after {

    content: "";

    position: absolute;

    top: -15%;
    left: -220px;

    width:
        150px;

    height:
        130%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.20),
            transparent
        );

    transform:
        skewX(-18deg);

    filter:
        blur(5px);

    pointer-events:
        none;

    animation:
        silhouetteScreenFlash
        1200ms 180ms
        ease-out forwards;
}

@keyframes silhouetteScreenFlash {

    from {
        left: -220px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        left:
            calc(100% + 220px);

        opacity: 0;
    }
}


/* =========================
   شاشات أصغر
========================= */

@media (max-width: 900px) {

    #silhouette-answer-area {

        grid-template-columns:
            minmax(200px, 1fr)
            minmax(200px, 1fr) !important;

        column-gap:
            16px !important;

        padding:
            80px 24px 24px !important;
    }

    #silhouette-answer-shadow-image,
    #silhouette-answer-image {

        height:
            min(48vh, 340px) !important;
    }

    .silhouette-judge-button {

        min-width:
            145px !important;

        font-size:
            17px !important;
    }
}
/* =========================================================
   صاحب الظل الطويل - إصلاح إخفاء مراحل السؤال والإجابة
========================================================= */

#silhouette-question-image.hidden,
#silhouette-show-answer.hidden,
#silhouette-question-overlay .silhouette-question-text.hidden,
#silhouette-question-overlay .silhouette-top-left.hidden {
    display: none !important;
}

#silhouette-answer-area.hidden {
    display: none !important;
}
/* صاحب الظل الطويل - عناوين صور الإجابة */

.silhouette-answer-label {
    align-self: end;

    margin-bottom: 6px;

    padding: 7px 18px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    backdrop-filter:
        blur(10px);

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        900;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.22);
}

/* أول عنوان = الظل */
#silhouette-answer-area
.silhouette-answer-label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;

    justify-self: center;

    transform:
        translateY(-215px);
}

/* ثاني عنوان = الشخصية */
#silhouette-answer-area
.silhouette-answer-label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;

    justify-self: center;

    transform:
        translateY(-215px);
}
/* صاحب الظل الطويل - انتقال ناعم لصفحة الإجابة */

#silhouette-answer-area {
    animation:
        silhouetteAnswerStageEnter
        520ms
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes silhouetteAnswerStageEnter {
    from {
        opacity: 0;
        transform:
            scale(0.965)
            translateY(18px);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }
}
/* ==================================================
   صاحب الظل الطويل
   التصميم السينمائي النهائي
   ================================================== */

html body #silhouette-question-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    width: 100vw !important;
    height: 100vh !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(53, 88, 180, 0.42) 0%,
            rgba(24, 38, 102, 0.72) 35%,
            rgba(8, 13, 52, 0.96) 74%
        ),
        linear-gradient(
            135deg,
            #07102c 0%,
            #11194d 45%,
            #080b25 100%
        ) !important;
}


/* وهج متحرك كبير خلف المحتوى */
html body
#silhouette-question-overlay::before {
    content: "";

    position: absolute;
    inset: -35%;

    pointer-events: none;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(101, 174, 255, 0.11),
            transparent,
            rgba(185, 109, 255, 0.10),
            transparent
        );

    filter: blur(28px);

    animation:
        silhouetteWorldRotate
        20s
        linear
        infinite;
}

@keyframes silhouetteWorldRotate {
    to {
        transform: rotate(360deg);
    }
}


/* ==================================================
   الرموز المتحركة في الخلفية
   ================================================== */

#silhouette-question-overlay
.silhouette-bg-shapes {
    position: absolute !important;
    inset: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 1 !important;
}

#silhouette-question-overlay
.silhouette-bg-shapes span {
    position: absolute !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 90px !important;
    height: 90px !important;

    border: 1px solid
        rgba(255,255,255,0.10);

    border-radius: 50% !important;

    background:
        rgba(255,255,255,0.035);

    backdrop-filter:
        blur(5px);

    box-shadow:
        0 0 35px
        rgba(78,146,255,0.10);

    opacity: 0.25;

    animation:
        silhouetteFloat
        10s
        ease-in-out
        infinite;
}


/* الرموز نفسها */
#silhouette-question-overlay
.silhouette-bg-shapes span::before {
    font-size: 44px;
    filter:
        grayscale(1)
        brightness(2);

    opacity: 0.72;
}


/* 👤 */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(1) {
    top: 10%;
    left: 8%;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(1)::before {
    content: "👤";
}


/* ؟ */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(2) {
    top: 18%;
    right: 11%;

    width: 115px !important;
    height: 115px !important;

    animation-delay: -3s;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(2)::before {
    content: "؟";
    font-size: 66px;
    font-weight: 900;
}


/* 🔎 */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(3) {
    bottom: 13%;
    left: 13%;

    animation-delay: -5s;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(3)::before {
    content: "🔎";
}


/* 🎭 */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(4) {
    bottom: 9%;
    right: 12%;

    width: 110px !important;
    height: 110px !important;

    animation-delay: -7s;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(4)::before {
    content: "🎭";
}


/* 👤 */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(5) {
    top: 46%;
    left: 3%;

    width: 68px !important;
    height: 68px !important;

    animation-delay: -2s;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(5)::before {
    content: "👤";
    font-size: 32px;
}


/* ؟ */
#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(6) {
    top: 52%;
    right: 4%;

    width: 72px !important;
    height: 72px !important;

    animation-delay: -6s;
}

#silhouette-question-overlay
.silhouette-bg-shapes span:nth-child(6)::before {
    content: "?";
    font-size: 40px;
    font-weight: 900;
}


@keyframes silhouetteFloat {
    0%,
    100% {
        transform:
            translate3d(0,0,0)
            rotate(-5deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(0,-32px,0)
            rotate(7deg)
            scale(1.10);
    }
}


/* ==================================================
   المحتوى الرئيسي
   ================================================== */

html body
#silhouette-question-overlay
.silhouette-question-card {
    position: relative !important;

    z-index: 20 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 100vh !important;

    padding:
        42px
        40px
        28px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    border: none !important;
    box-shadow: none !important;
}


/* السؤال */
#silhouette-question-overlay
.silhouette-question-text {
    position: relative;

    z-index: 30;

    margin:
        0
        0
        24px !important;

    padding:
        12px
        34px;

    border-radius: 999px;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.3vw,
            42px
        ) !important;

    font-weight: 900 !important;

    text-shadow:
        0 4px 18px
        rgba(0,0,0,.65);

    background:
        rgba(9,18,60,.42);

    border:
        1px solid
        rgba(145,198,255,.25);

    backdrop-filter:
        blur(12px);

    animation:
        silhouetteTitleEnter
        .65s
        cubic-bezier(.2,1.3,.3,1)
        both;
}

@keyframes silhouetteTitleEnter {
    from {
        opacity: 0;
        transform:
            translateY(-25px)
            scale(.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* ==================================================
   إطار صورة الظل
   ================================================== */

#silhouette-question-overlay
#silhouette-question-image:not(.hidden) {
    position: relative !important;

    z-index: 25 !important;

    display: block !important;

    width:
        min(
            430px,
            55vw
        ) !important;

    height:
        min(
            500px,
            55vh
        ) !important;

    object-fit: contain !important;

    padding: 14px !important;

    border:
        3px solid
        rgba(142,203,255,.76) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        ) !important;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.50),
        0 0 38px
        rgba(69,155,255,.30),
        inset 0 1px 0
        rgba(255,255,255,.18) !important;

    animation:
        silhouetteShadowEntrance
        .85s
        cubic-bezier(.15,1.25,.28,1)
        both;
}

@keyframes silhouetteShadowEntrance {
    0% {
        opacity: 0;
        transform:
            scale(.68)
            translateY(45px);

        filter:
            blur(18px);
    }

    65% {
        opacity: 1;

        transform:
            scale(1.04)
            translateY(-5px);

        filter:
            blur(0);
    }

    100% {
        transform:
            scale(1)
            translateY(0);
    }
}


/* خط Scanner على منطقة السؤال */
#silhouette-question-overlay
.silhouette-question-card::after {
    content: "";

    position: absolute;

    z-index: 24;

    left: 50%;
    top: 23%;

    width:
        min(
            470px,
            58vw
        );

    height: 3px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(105,220,255,.95),
            transparent
        );

    box-shadow:
        0 0 18px
        rgba(92,215,255,.95);

    animation:
        silhouetteScanner
        3.1s
        ease-in-out
        infinite;
}

@keyframes silhouetteScanner {
    0% {
        top: 27%;
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    85% {
        opacity: .9;
    }

    100% {
        top: 72%;
        opacity: 0;
    }
}


/* زر إظهار الإجابة */
#silhouette-question-overlay
#silhouette-show-answer:not(.hidden) {
    position: relative !important;

    z-index: 40 !important;

    display: block !important;

    margin-top:
        22px !important;

    padding:
        14px
        42px !important;

    border: 0 !important;

    border-radius:
        17px !important;

    font-size:
        21px !important;

    font-weight:
        900 !important;

    color:
        #382100 !important;

    background:
        linear-gradient(
            135deg,
            #fff0a0,
            #ffc642,
            #ff9e21
        ) !important;

    box-shadow:
        0 8px 0
        #a95a00,
        0 18px 35px
        rgba(0,0,0,.36),
        0 0 25px
        rgba(255,197,53,.30) !important;

    cursor: pointer;

    transition:
        transform .2s ease,
        filter .2s ease;
}

#silhouette-show-answer:hover {
    transform:
        translateY(-3px)
        scale(1.03);

    filter:
        brightness(1.08);
}


/* ==================================================
   صفحة الإجابة
   ================================================== */

html body
#silhouette-answer-area:not(.hidden) {
    position: relative !important;

    z-index: 50 !important;

    display: grid !important;

    grid-template-columns:
        minmax(270px, 420px)
        minmax(270px, 420px) !important;

    grid-template-rows:
        auto
        auto
        auto
        auto !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    column-gap:
        42px !important;

    row-gap:
        14px !important;

    width:
        min(
            1000px,
            92vw
        ) !important;

    margin:
        0
        auto !important;

    padding:
        24px
        35px
        28px !important;

    border:
        1px solid
        rgba(130,195,255,.24) !important;

    border-radius:
        34px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,21,65,.72),
            rgba(20,18,68,.58)
        ) !important;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.45),
        inset 0 1px 0
        rgba(255,255,255,.12) !important;

    animation:
        silhouetteAnswerPanelEnter
        .55s
        ease
        both;
}

@keyframes silhouetteAnswerPanelEnter {
    from {
        opacity: 0;
        transform:
            scale(.92)
            translateY(25px);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }
}


/* الصورتان */
#silhouette-answer-shadow-image,
#silhouette-answer-image {
    width:
        100% !important;

    height:
        min(
            400px,
            47vh
        ) !important;

    object-fit:
        contain !important;

    padding:
        12px !important;

    border-radius:
        25px !important;

    border:
        2px solid
        rgba(255,255,255,.35) !important;

    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.38) !important;
}


/* حركة صورة الظل */
#silhouette-answer-area:not(.hidden)
#silhouette-answer-shadow-image {
    animation:
        silhouetteAnswerShadow
        .65s
        cubic-bezier(.2,1,.3,1)
        both;
}

@keyframes silhouetteAnswerShadow {
    from {
        opacity: 0;
        transform:
            translateX(70px)
            scale(.82);
    }

    to {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }
}


/* ==================================================
   أهم شيء:
   ظهور الصورة الملونة بحركة كشف قوية
   ================================================== */

#silhouette-answer-area:not(.hidden)
#silhouette-answer-image {
    animation:
        silhouetteColorReveal
        1.05s
        cubic-bezier(.16,1.25,.3,1)
        both !important;

    animation-delay:
        .20s !important;
}

@keyframes silhouetteColorReveal {
    0% {
        opacity: 0;

        transform:
            scale(.55)
            rotate(-5deg)
            translateX(-90px);

        filter:
            blur(22px)
            grayscale(1)
            brightness(2.3);
    }

    45% {
        opacity: 1;

        filter:
            blur(4px)
            grayscale(.6)
            brightness(1.4);
    }

    72% {
        transform:
            scale(1.07)
            rotate(1.5deg)
            translateX(0);

        filter:
            blur(0)
            grayscale(0);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0)
            translateX(0);

        filter:
            blur(0)
            grayscale(0)
            brightness(1);
    }
}


/* اسم الشخصية */
#silhouette-answer-area
#silhouette-answer-text {
    grid-column:
        1 / -1 !important;

    text-align:
        center !important;

    margin-top:
        2px !important;

    font-size:
        clamp(
            26px,
            2.2vw,
            40px
        ) !important;

    font-weight:
        900 !important;

    color:
        #ffffff !important;

    text-shadow:
        0 4px 18px
        rgba(0,0,0,.55);

    animation:
        silhouetteNameReveal
        .65s
        .55s
        both;
}

@keyframes silhouetteNameReveal {
    from {
        opacity: 0;
        letter-spacing: 12px;
        transform:
            translateY(15px);
    }

    to {
        opacity: 1;
        letter-spacing: 0;
        transform:
            translateY(0);
    }
}


/* أزرار التحكيم */
#silhouette-answer-area
.silhouette-judgement-buttons {
    grid-column:
        1 / -1 !important;

    display: flex !important;

    justify-content:
        center !important;

    gap:
        15px !important;

    margin-top:
        5px !important;
}
/* أيقونة صاحب الظل الطويل */

.silhouette-category-icon {
    width: 56px !important;
    height: 56px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.silhouette-category-icon svg {
    width: 52px !important;
    height: 52px !important;

    fill: #050505 !important;

    filter:
        drop-shadow(
            0 4px 4px
            rgba(0,0,0,.35)
        )
        drop-shadow(
            0 0 5px
            rgba(255,255,255,.12)
        );
}
#category-example-wrong-info {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.category-example-wrong-info-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.18);
}

.category-example-wrong-info-item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background:
        #ffc928;

    color:
        #102653;

    font-weight:
        900;
}

.category-example-wrong-info-item strong {
    color:
        #ffffff;

    font-size:
        17px;

    line-height:
        1.7;
}
.category-example-wrong-info-item {
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.category-example-wrong-info-item.is-wrong {
    background:
        linear-gradient(
            135deg,
            rgba(179, 24, 49, .95),
            rgba(112, 10, 29, .95)
        ) !important;

    border-color:
        rgba(255, 126, 145, .95) !important;

    box-shadow:
        0 0 24px
        rgba(255, 52, 82, .35);

    transform:
        scale(1.03);
}

.category-example-wrong-info-item.is-wrong span {
    background:
        #ffffff !important;

    color:
        #b31831 !important;
}
#category-example-sequence {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.category-example-sequence-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.18);
}

.category-example-sequence-item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background: #ffc928;
    color: #102653;

    font-weight: 900;
}

.category-example-sequence-item strong {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.7;
}
.category-example-sequence-item.is-correct {
    background:
        linear-gradient(
            135deg,
            rgba(24, 137, 79, .95),
            rgba(11, 88, 49, .95)
        ) !important;

    border-color:
        rgba(116, 255, 177, .9) !important;

    box-shadow:
        0 0 22px
        rgba(42, 220, 120, .25);

    transform:
        scale(1.02);
}
#category-example-silhouette {
    margin: 18px auto;
    text-align: center;
}

.category-example-silhouette-image {
    display: block;
    width: min(100%, 360px);
    max-height: 420px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 18px;
}
#category-example-secret-lock {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.category-example-secret-lock-hint {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 16px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.18);
}

.category-example-secret-lock-hint span {
    font-size: 28px;
    font-weight: 900;

    color: #ffc928;

    letter-spacing: 6px;
}

.category-example-secret-lock-hint strong {
    color: #ffffff;

    font-size: 16px;
    line-height: 1.7;
}
/* وضع السامبل فقط لفئة لا ترمش */
#dont-blink-overlay.dont-blink-example-mode
#dont-blink-timer-area,

#dont-blink-overlay.dont-blink-example-mode
#dont-blink-judgement {
    display: none !important;
}

/* زر البداية وزر إظهار الإجابة في سامبل لا ترمش */

#dont-blink-overlay.dont-blink-example-mode
#dont-blink-start:not(.dont-blink-hidden),

#dont-blink-overlay.dont-blink-example-mode
#dont-blink-show-answer:not(.dont-blink-hidden) {
    display: block !important;

    position: fixed !important;
    left: 50% !important;
    bottom: 70px !important;

    transform: translateX(-50%) !important;

    z-index: 9999 !important;

    min-width: 220px !important;
}

#dont-blink-example-close {
    display: none;
}

#dont-blink-overlay.dont-blink-example-mode
#dont-blink-example-close {
    display: flex !important;

    position: fixed !important;
    top: 22px !important;
    left: 22px !important;

    width: 48px !important;
    height: 48px !important;

    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    font-size: 32px;
    font-weight: 700;

    cursor: pointer;
    z-index: 10000;
}
/* تكبير نافذة سامبل ولو جيت وجبتها */

#category-example-modal:not(.hidden) .category-example-content {
    width: min(92vw, 900px) !important;
    max-width: 900px !important;
    min-height: 620px !important;
    padding: 34px !important;
}

#category-example-modal:not(.hidden)
#category-example-image {
    width: min(100%, 650px) !important;
    max-height: 420px !important;
    object-fit: contain !important;
    margin: 20px auto !important;
}

#category-example-modal:not(.hidden)
#category-example-question {
    font-size: 30px !important;
    line-height: 1.5 !important;
}

#category-example-modal:not(.hidden)
#category-example-show-answer {
    font-size: 22px !important;
    padding: 16px 34px !important;
}
/* ==========================================
   أيقونة فئة شيفرة - مورس
========================================== */

.cipher-category-icon {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 64px;
    height: 64px;
    font-family: monospace;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 3px;
    direction: ltr;
}

.cipher-category-icon .morse-row {
    display: block;
    white-space: nowrap;
}
/* ==========================================
   إخفاء زر "قدّم الفريق إجابته" نهائيًا
========================================== */

#normal-submit-answer-button {
    display: none !important;
}
#zoom-submit-answer-button {
    display: none !important;
}
#focus-submit-answer-button {
    display: none !important;
}
#cipher-submit-answer-button {
    display: none !important;
}
#charades-submit-answer-button {
    display: none !important;
}
#listen-focus-submit-answer {
    display: none !important;
}
#pg-hex-submit-answer {
    display: none !important;
}
#nagham-song-submit-answer {
    display: none !important;
}
/* ==========================================
   إخفاء جميع أزرار "قدّم الفريق إجابته"
   في البازل والشبكة وجميع الفئات
========================================== */

button[id*="submit-answer"] {
    display: none !important;
}
/* إخفاء كل أزرار تقديم الإجابة نهائيًا */
#normal-submit-answer-button,
#zoom-submit-answer-button,
#focus-submit-answer-button,
#cipher-submit-answer-button,
#charades-submit-answer-button,
#listen-focus-submit-answer,
#pg-hex-submit-answer,
#nagham-song-submit-answer,
#moving-letters-submit-answer,
button[id*="submit-answer"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* ==========================================
   ما الذي اختفى؟ - صور الإجابة
========================================== */

.bring-it-answer-pair {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.bring-it-answer-pair .bring-it-image-frame {
    width: 48%;
    max-width: 620px;
    margin: 0;
}

.bring-it-answer-pair .bring-it-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
/* ==========================================
   ما الذي اختفى؟ - شاشة الانتقال
========================================== */

.bring-it-transition-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(28px, 4vw, 54px);
    font-weight: 900;
    text-align: center;

    z-index: 50;

    animation: bringItTransitionPulse 0.7s ease-in-out infinite alternate;
}

.bring-it-transition-message.hidden {
    display: none !important;
}

@keyframes bringItTransitionPulse {
    from {
        transform: scale(0.96);
        opacity: 0.7;
    }

    to {
        transform: scale(1.05);
        opacity: 1;
    }
}
#bring-it-subtitle {
    white-space: nowrap;
}
.category-example-closest-input {
    width: 220px;
    max-width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 2px solid rgba(92, 171, 255, 0.65);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: #102653;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    outline: none;
    box-sizing: border-box;
}

.category-example-closest-input:focus {
    border-color: #ffc928;
    box-shadow: 0 0 0 3px rgba(255, 201, 40, 0.18);
}
.category-example-closest-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
    font-size: 18px;
    font-weight: 900;
}

.category-example-closest-team strong {
    min-width: 110px;
    text-align: right;
    color: #ffffff;
}

#category-example-closest-first,
#category-example-closest-second {
    width: 220px;
    height: 48px;
    padding: 0 16px;

    border: 2px solid #46a8ff;
    border-radius: 14px;

    background: #ffffff;
    color: #102653;

    font-size: 18px;
    font-weight: 900;
    text-align: center;

    outline: none;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#category-example-closest-first:focus,
#category-example-closest-second:focus {
    border-color: #ffc928;

    box-shadow:
        0 0 0 4px rgba(255, 201, 40, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.2);

    transform: translateY(-1px);
}

#category-example-closest-first::placeholder,
#category-example-closest-second::placeholder {
    color: #8d99ad;
    font-weight: 700;
}
.category-example-box {
    position: relative;
}

.category-example-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    border-radius: 50% !important;

    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    z-index: 9999 !important;
}
#bring-it-target-marker {
    display: none !important;
}
#bring-it-answer-stage .bring-it-answer-description {
    display: block !important;
}
/* إصلاح هيدر شاشة البازل */
#game-screen .game-header {
    display: grid;
    grid-template-columns: 1fr 280px 1fr;
    align-items: start;
    gap: 14px;
    position: static !important;
}

#game-screen .center-status {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

#game-screen #team1-card-box,
#game-screen #team2-card-box {
    min-height: 74px;
}
/* ترتيب هيدر البازل: الثاني يسار - الدور وسط - الأول يمين */
#game-screen .game-header {
    display: grid !important;
    grid-template-columns: 1fr 280px 1fr !important;
    grid-template-areas:
        "team2 status team1" !important;
    gap: 14px !important;
    align-items: stretch !important;
    direction: ltr !important;
}

#game-screen #team1-card-box {
    grid-area: team1 !important;
}

#game-screen #team2-card-box {
    grid-area: team2 !important;
}

#game-screen .center-status {
    grid-area: status !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
    transform: none !important;
}

#game-screen #team1-card-box,
#game-screen #team2-card-box,
#game-screen .center-status {
    min-height: 74px !important;
    height: 74px !important;
    box-sizing: border-box !important;
}

#game-screen #turn-display.turn-display {
    height: 74px !important;
    min-height: 74px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}
/* ==========================================
   تصغير سامبل صاحب الظل الطويل ليتناسب مع الشاشة
========================================== */

#category-example-modal
.category-example-box:has(#category-example-silhouette) {
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;

    padding: 22px 24px 18px !important;
}

#category-example-modal
.category-example-box:has(#category-example-silhouette)
#category-example-title {
    margin-bottom: 8px !important;
    font-size: 24px !important;
}

#category-example-modal
.category-example-box:has(#category-example-silhouette)
#category-example-question {
    margin-bottom: 8px !important;
    font-size: 26px !important;
    line-height: 1.35 !important;
}

#category-example-modal
#category-example-silhouette {
    margin: 8px auto !important;
}

#category-example-modal
.category-example-silhouette-image {
    width: min(100%, 320px) !important;
    max-height: 330px !important;
}

#category-example-modal
.category-example-box:has(#category-example-silhouette)
#category-example-show-answer {
    margin: 10px auto !important;
    padding: 12px 28px !important;
}
/* تصغير سؤال سامبل فئة شيفرة */
#category-example-modal
#category-example-question {
    font-size: 24px !important;
}
/* ==========================================
   سامبل فك القفل — بدون سكرول
========================================== */

#category-example-modal
.category-example-box:has(#category-example-secret-lock) {
    max-height: none !important;
    overflow: visible !important;
    padding: 22px 24px 18px !important;
}

#category-example-modal
.category-example-box:has(#category-example-secret-lock)
#category-example-title {
    margin-bottom: 8px !important;
}

#category-example-modal
.category-example-box:has(#category-example-secret-lock)
#category-example-question {
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

#category-example-modal
#category-example-secret-lock {
    margin: 8px auto !important;
    gap: 8px !important;
}

#category-example-modal
.category-example-secret-lock-hint {
    padding: 10px 12px !important;
    gap: 4px !important;
}

#category-example-modal
.category-example-box:has(#category-example-secret-lock)
#category-example-show-answer {
    margin: 8px auto !important;
}
/* سامبل شو اختفى فقط — إظهار الصورتين كاملتين */
#category-example-modal
.category-example-box:has(#category-example-pair:not(.hidden))
#category-example-pair img {
    object-fit: contain !important;
    background: #061a3f !important;
}
.nagham-song-mode input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #777;
    border-radius: 50%;
    cursor: pointer;
}

.nagham-song-mode input[type="checkbox"]:checked {
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px #777;
}
/* ==========================================
   احتفال الرقم الذهبي في البازل
========================================== */

.golden-puzzle-celebration {
    position: fixed;
    inset: 0;
    z-index: 2147483646;

    display: grid;
    place-items: center;

    padding: 20px;
    overflow: hidden;

    direction: rtl;
    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 210, 45, 0.28),
            rgba(3, 18, 55, 0.84) 60%,
            rgba(0, 5, 22, 0.96)
        );
}

.golden-puzzle-card {
    position: relative;
    z-index: 2;

    width: min(
        680px,
        92vw
    );

    padding:
        38px
        28px
        34px;

    overflow: hidden;

    color: #fff8d4;

    background:
        linear-gradient(
            145deg,
            #8a5100,
            #3b2100 65%,
            #160b00
        );

    border:
        3px solid
        #ffd84d;

    border-radius: 28px;

    box-shadow:
        0 0 0 7px
            rgba(
                255,
                205,
                44,
                0.14
            ),
        0 25px 70px
            rgba(
                0,
                0,
                0,
                0.5
            ),
        0 0 48px
            rgba(
                255,
                190,
                0,
                0.58
            ),
        inset 0 1px 0
            rgba(
                255,
                255,
                255,
                0.3
            );
}

.golden-puzzle-icon {
    margin-bottom: 10px;

    font-size:
        clamp(
            48px,
            8vw,
            78px
        );

    filter:
        drop-shadow(
            0 0 14px
            rgba(
                255,
                215,
                0,
                0.95
            )
        );
}

.golden-puzzle-card h2 {
    margin: 0;

    color: #fff4a8;

    font-size:
        clamp(
            27px,
            4.6vw,
            46px
        );

    font-weight: 900;
    line-height: 1.4;

    text-shadow:
        0 3px 0 #713a00,
        0 0 18px
            rgba(
                255,
                214,
                64,
                0.7
            );
}

.golden-puzzle-card strong {
    display: inline-block;

    margin-top: 18px;
    padding: 10px 24px;

    color: #3b2100;

    font-size:
        clamp(
            21px,
            3vw,
            29px
        );

    font-weight: 900;

    background:
        linear-gradient(
            135deg,
            #fff3ae,
            #ffc928
        );

    border-radius: 999px;

    box-shadow:
        0 7px 20px
            rgba(
                255,
                176,
                0,
                0.35
            );
}

.golden-puzzle-card p {
    margin:
        14px
        0
        0;

    color: #ffffff;

    font-size:
        clamp(
            18px,
            2.6vw,
            25px
        );

    font-weight: 800;
}
.golden-puzzle-celebration {
    animation:
        goldenOverlayAppear
        0.25s
        ease
        both;
}

.golden-puzzle-card {
    animation:
        goldenCardAppear
        0.55s
        cubic-bezier(
            0.2,
            1.35,
            0.35,
            1
        )
        both;
}

.golden-puzzle-icon {
    animation:
        goldenIconPulse
        0.7s
        ease-in-out
        infinite
        alternate;
}

.golden-puzzle-sparkle {
    position: absolute;
    top: -10%;
    z-index: 1;

    width: 10px;
    height: 16px;

    background:
        linear-gradient(
            #fff8b0,
            #ffc400
        );

    border-radius: 3px;

    box-shadow:
        0 0 10px
        #ffe16a;

    animation-name:
        goldenSparkleFall;

    animation-timing-function:
        linear;

    animation-fill-mode:
        both;
}

.golden-puzzle-sparkle:nth-child(3n) {
    width: 7px;
    height: 7px;

    background: #ffffff;
    border-radius: 50%;
}

.golden-puzzle-sparkle:nth-child(4n) {
    background: #ff9f1c;
}

.golden-puzzle-celebration
.golden-puzzle-card::before,
.golden-puzzle-celebration
.golden-puzzle-card::after {
    content: "✦";

    position: absolute;
    top: 18px;

    color: #fff0a6;
    font-size: 38px;

    text-shadow:
        0 0 18px
        #ffd000;

    animation:
        goldenFirework
        0.75s
        ease-in-out
        infinite
        alternate;
}

.golden-puzzle-card::before {
    right: 24px;
}

.golden-puzzle-card::after {
    left: 24px;

    animation-delay:
        0.25s;
}

.golden-puzzle-leaving {
    animation:
        goldenOverlayLeave
        0.5s
        ease
        both;
}

@keyframes goldenOverlayAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes goldenCardAppear {
    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(0.72)
            rotate(-2deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}

@keyframes goldenIconPulse {
    from {
        transform:
            scale(0.92);
    }

    to {
        transform:
            scale(1.1);
    }
}

@keyframes goldenFirework {
    from {
        opacity: 0.45;

        transform:
            scale(0.7)
            rotate(-15deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1.25)
            rotate(15deg);
    }
}

@keyframes goldenSparkleFall {
    0% {
        opacity: 0;

        transform:
            translateY(-10vh)
            rotate(0deg);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0.9;

        transform:
            translateY(115vh)
            rotate(720deg);
    }
}

@keyframes goldenOverlayLeave {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* ==========================================
   PuzzGo Saved Game Panel
========================================== */
.pg-saved-game-panel {
    position: absolute;
    top: 135px;
    right: 55px;

    width: 250px;
    min-height: auto;

    padding: 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    direction: rtl;

    background:
        linear-gradient(
            180deg,
            rgba(5, 49, 102, 0.96),
            rgba(3, 30, 68, 0.96)
        );

    border: 2px solid #ffc928;
    border-radius: 18px;

    box-shadow:
        0 7px 0 rgba(0, 20, 50, 0.65),
        0 0 20px rgba(255, 201, 40, 0.28);

    z-index: 20;
}
.pg-saved-game-continue {
    width: 100%;
    max-width: 190px;

    padding: 11px 18px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #2fb6ff 0%,
            #148ee8 55%,
            #0871c5 100%
        );

    color: #ffffff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 4px 0 #04548f,
        0 7px 14px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.28);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.15s ease;
}

.pg-saved-game-continue:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 5px 0 #04548f,
        0 9px 18px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.32);
}

.pg-saved-game-continue:active {
    transform: translateY(2px);

    box-shadow:
        0 2px 0 #04548f,
        0 4px 8px rgba(0,0,0,0.22);
}
.pg-saved-game-content {
    width: 100%;
    text-align: center;
}

.pg-saved-game-content strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.4;

    text-shadow:
        0 2px 5px rgba(0,0,0,0.35);
}

.pg-saved-game-content small {
    display: block;

    color: #cfe7ff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;

    opacity: 0.95;
}
.pg-saved-game-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 2px;

    font-size: 25px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.16),
            rgba(255,255,255,0.06)
        );

    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 5px 12px rgba(0,0,0,0.22);
}
.pg-saved-game-panel {
    background:
        radial-gradient(
            circle at top right,
            rgba(52, 160, 255, 0.18),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(7, 54, 108, 0.98),
            rgba(2, 28, 64, 0.98)
        );

    border: 1px solid rgba(255, 211, 76, 0.95);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.32),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08);

    border-radius: 20px;
}
#game-screen #question-text {
    background:
        linear-gradient(
            135deg,
            #1853ae,
            #103b86 52%,
            #09285f
        ) !important;

    border: 2px solid #ffc83d !important;
    border-radius: 18px !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.50);

    box-shadow:
        0 0 18px rgba(58, 167, 255, 0.38),
        inset 0 2px 0 rgba(255, 255, 255, 0.16),
        inset 0 -4px 0 rgba(0, 0, 0, 0.18) !important;

    outline:
        1px solid rgba(255, 222, 108, 0.45);

    outline-offset: -5px;
}
@keyframes puzzleTileCorrectReveal {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    35% {
        opacity: 1;
        transform: scale(1.12) rotate(-2deg);
        filter:
            brightness(1.35)
            drop-shadow(0 0 14px rgba(255, 215, 70, 0.95));
    }

    65% {
        opacity: 0.65;
        transform: scale(0.92) rotate(3deg);
        filter:
            brightness(1.7)
            blur(1px)
            drop-shadow(0 0 20px rgba(255, 190, 40, 0.9));
    }

    100% {
        opacity: 0;
        transform: scale(0.55) rotate(7deg);
        filter:
            brightness(2)
            blur(3px);
    }
}

.puzzle-tile.puzzle-correct-reveal {
    animation:
        puzzleTileCorrectReveal
        0.95s
        cubic-bezier(.2,.8,.25,1)
        forwards !important;

    pointer-events: none !important;
    z-index: 50 !important;
}
/* ==========================================
   حروف متحركة — تثبيت المؤقت واسم الفريق أعلى اليسار
========================================== */

#moving-letters-overlay .moving-letters-timer-box {
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    right: auto !important;

    z-index: 1000001 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;
    margin: 0 !important;
}

#moving-letters-overlay .moving-letters-timer-circle {
    order: 1 !important;
}

#moving-letters-overlay .moving-letters-timer-label {
    order: 2 !important;

    min-width: 130px !important;
    width: 130px !important;

    padding: 7px 8px !important;
    font-size: 15px !important;
}

#moving-letters-overlay .moving-letters-submit-answer {
    order: 3 !important;

    min-width: 130px !important;
    width: 130px !important;

    padding: 8px 6px !important;
    font-size: 14px !important;
}
html body
#pg-hex-question-overlay.pg-hex-question-overlay
.pg-hex-question-card {
    background: #10213f !important;
    border: 5px solid #f4c542 !important;
}
/* ==========================================
   صاحب الظل الطويل — تحذير آخر 5 ثوانٍ
========================================== */

#silhouette-timer.is-warning {
    color: #ff3b3b !important;

    text-shadow:
        0 0 12px rgba(255, 59, 59, 0.85),
        0 0 24px rgba(255, 59, 59, 0.55) !important;

    animation:
        silhouetteTimerWarningPulse
        0.65s ease-in-out infinite;
}

@keyframes silhouetteTimerWarningPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

/* فك القفل — إعادة العنوان وصورة القفل */

/* فك القفل — إظهار العنوان فقط وإبقاء الخزنة الكبيرة مخفية */

.secret-lock-header {
    display: flex !important;
}

.secret-lock-vault {
    display: none !important;
}
/* فك القفل — تصميم خانات إجابات الفريقين */

.secret-lock-team-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

.secret-lock-team-input-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 16px;

    border: 2px solid rgba(255, 212, 90, 0.55);
    border-radius: 18px;

    background:
        linear-gradient(
            160deg,
            rgba(16, 45, 102, 0.95),
            rgba(6, 19, 47, 0.95)
        );

    box-shadow:
        inset 0 0 24px rgba(50, 216, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.24);
}

.secret-lock-team-input-box strong {
    color: #ffd45a;
    font-size: 20px;
    font-weight: 900;
}

.secret-lock-team-input-box input {
    width: 150px;
    max-width: 100%;

    padding: 12px 16px;

    border: 2px solid rgba(50, 216, 255, 0.55);
    border-radius: 14px;

    outline: none;

    background: #071a3d;
    color: #ffffff;

    font-size: 34px;
    font-weight: 900;
    letter-spacing: 10px;
    text-align: center;

    direction: ltr;

    box-shadow:
        inset 0 0 18px rgba(50, 216, 255, 0.08);
}

.secret-lock-team-input-box input:focus {
    border-color: #ffd45a;

    box-shadow:
        0 0 0 3px rgba(255, 212, 90, 0.16),
        inset 0 0 18px rgba(50, 216, 255, 0.08);
}
/* فك القفل — أزرار التحكيم تظهر فقط بعد إظهار الإجابة */

#secret-lock-judgement.secret-lock-hidden {
    display: none !important;
}

#secret-lock-judgement:not(.secret-lock-hidden) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}
/* فك القفل — تثبيت شكل خانات إدخال إجابة الفريقين */

#secret-lock-team1-input,
#secret-lock-team2-input {
    display: block !important;

    width: 180px !important;
    height: 54px !important;

    min-width: 180px !important;
    min-height: 54px !important;

    padding: 8px 14px !important;
    margin: 0 auto !important;

    border: 2px solid #32d8ff !important;
    border-radius: 14px !important;

    background: #071a3d !important;
    color: #ffffff !important;

    font-size: 30px !important;
    font-weight: 900 !important;
    letter-spacing: 9px !important;
    text-align: center !important;

    direction: ltr !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box !important;
}

#secret-lock-team1-input:focus,
#secret-lock-team2-input:focus {
    border-color: #ffd45a !important;
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(255, 212, 90, 0.18) !important;
}
/* فك القفل — احتواء الشاشة كاملة بدون سكرول */

#secret-lock-overlay .secret-lock-shell {
    zoom: 0.82 !important;
}
/* فك القفل — ممنوع ظهور التحكيم قبل إظهار الإجابة */

#secret-lock-result:has(
    #secret-lock-reveal:not(.secret-lock-hidden)
)
#secret-lock-judgement {
    display: none !important;
}
/* فك القفل — حذف شريط النتيجة القديم الفارغ */
#secret-lock-winner {
    display: none !important;
}
/* فك القفل — رفع صفحة الإجابة والتحكيم داخل الشاشة */

#secret-lock-result {
    padding: 8px 12px !important;
}

#secret-lock-solution {
    margin: 4px auto !important;
    padding: 6px !important;
    gap: 8px !important;
}

.secret-lock-team-answer {
    min-height: 56px !important;
    padding: 6px 10px !important;
}

#secret-lock-judgement {
    margin-top: 8px !important;
    padding: 0 !important;
}

#secret-lock-judgement button {
    min-height: 40px !important;
    padding: 8px 18px !important;
    font-size: 16px !important;
}
#secret-lock-team1-button {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#secret-lock-no-one-button {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}

#secret-lock-team2-button {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}
/* فك القفل — ترتيب صفحة الإجابة واستغلال مساحة الشاشة */

#secret-lock-overlay
.secret-lock-shell:has(
    #secret-lock-solution:not(.secret-lock-hidden)
) {
    zoom: 0.88 !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
) {
    transform: none !important;
    padding: 18px 24px 22px !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
)
#secret-lock-status {
    margin: 8px auto 22px !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
)
#secret-lock-solution {
    margin: 18px auto 22px !important;
    padding: 10px !important;
    gap: 18px !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
)
.secret-lock-team-answer {
    min-height: 78px !important;
    padding: 12px 18px !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
)
#secret-lock-judgement {
    margin-top: 20px !important;
    gap: 16px !important;
}

#secret-lock-result:has(
    #secret-lock-solution:not(.secret-lock-hidden)
)
#secret-lock-judgement button {
    min-height: 50px !important;
    padding: 10px 26px !important;
    font-size: 18px !important;
}

/* الأقرب يكسب — أزرار الحكم أسفل نفس صفحة النتيجة */

.closest-wins-overlay.showing-result
.closest-wins-result {
    justify-content: flex-start !important;
    gap: 8px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-ruler-wrap {
    padding-top: 52px !important;
    padding-bottom: 58px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-differences {
    margin-top: -6px !important;
}

.closest-wins-overlay.showing-result
#closest-wins-judgement {
    margin-top: auto !important;

    width: 100% !important;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px !important;
    padding-top: 8px !important;
}

.closest-wins-overlay.showing-result
#closest-wins-judgement.hidden {
    display: none !important;
}

.closest-wins-overlay.showing-result
#closest-wins-judgement button {
    min-width: 190px;
    min-height: 50px;

    font-size: 18px;
    font-weight: 900;
}
/* الأقرب يكسب — إنزال صناديق فرق الفريقين عن المسطرة */

.closest-wins-overlay.showing-result
.closest-wins-differences {
    margin-top: 24px !important;
}
/* الأقرب يكسب — توزيع النتيجة على المساحة بشكل أفضل */

.closest-wins-overlay.showing-result
.closest-wins-ruler-wrap {
    margin-top: 34px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

.closest-wins-overlay.showing-result
.closest-wins-differences {
    margin-top: 42px !important;
}

.closest-wins-overlay.showing-result
#closest-wins-judgement {
    margin-top: auto !important;
    margin-bottom: 4px !important;
}
/* حساب PuzzGo — احتواء النافذة كاملة داخل الشاشة بدون Scroll */

.pg-account-overlay {
    padding: 8px !important;
    overflow: hidden !important;
}

.pg-account-modal {
    width: min(940px, 96vw) !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}

.pg-account-hero {
    flex: 0 0 auto !important;
}

.pg-account-tabs {
    flex: 0 0 auto !important;
}

.pg-account-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    padding-top: 18px !important;
    padding-bottom: 16px !important;
}

.pg-account-panel[data-pg-panel="store"].active {
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
}

.pg-account-panel[data-pg-panel="store"]
.pg-panel-heading {
    margin-bottom: 14px !important;
    flex: 0 0 auto !important;
}

.pg-account-panel[data-pg-panel="store"]
.pg-packages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.pg-account-panel[data-pg-panel="store"]
.pg-package-card {
    min-height: 0 !important;
    height: 100% !important;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
}

.pg-account-panel[data-pg-panel="store"]
.pg-payment-note {
    margin-top: 12px !important;
    flex: 0 0 auto !important;
}

/* زر استسلام الجولة — البازل فقط */

.puzzle-surrender-btn {
    width: 100%;
    min-height: 44px;

    margin-top: 8px;
    padding: 10px 16px;

    border: 2px solid #ff8b8b;
    border-radius: 12px;

    color: #8a1f1f;
    background:
        linear-gradient(
            180deg,
            #fff5f5,
            #ffe1e1
        );

    font-size: 16px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 6px 14px rgba(180, 45, 45, 0.14);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.puzzle-surrender-btn:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            180deg,
            #ffe9e9,
            #ffcfcf
        );

    box-shadow:
        0 9px 18px rgba(180, 45, 45, 0.22);
}
/* ==========================================
   PuzzGo Match Recap
   تصميم صفحة ملخص نهاية المباراة
========================================== */

.pg-match-recap {
    position: relative;

    width: min(980px, 100%);
    margin: 18px auto 0;
    padding: 22px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 215, 0, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 229, 255, 0.14),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(8, 24, 48, 0.97),
            rgba(10, 38, 68, 0.96) 55%,
            rgba(14, 63, 83, 0.96)
        );

    border:
        1px solid rgba(255, 255, 255, 0.16);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    overflow: hidden;
}

.pg-match-recap::before,
.pg-match-recap::after {
    content: '';

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    filter: blur(18px);
    opacity: 0.28;

    pointer-events: none;
}

.pg-match-recap::before {
    top: -70px;
    right: -55px;

    background:
        radial-gradient(
            circle,
            rgba(255, 220, 85, 0.9),
            transparent 70%
        );
}

.pg-match-recap::after {
    bottom: -80px;
    left: -55px;

    background:
        radial-gradient(
            circle,
            rgba(0, 229, 255, 0.8),
            transparent 70%
        );
}

.pg-recap-header {
    position: relative;
    z-index: 1;

    text-align: center;

    padding: 4px 10px 18px;
}

.pg-recap-kicker {
    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.4px;

    color: #ffe992;

    background:
        rgba(255, 215, 0, 0.1);

    border:
        1px solid rgba(255, 224, 104, 0.25);

    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.14);
}

.pg-recap-header h3 {
    margin: 12px 0 6px;

    font-size: clamp(1.55rem, 4vw, 2.6rem);
    font-weight: 1000;

    color: #ffffff;

    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(0, 229, 255, 0.12);
}

.pg-recap-header p {
    margin: 0;

    color: rgba(255, 255, 255, 0.75);

    font-size: 14px;
    font-weight: 700;
}

.pg-recap-section {
    position: relative;
    z-index: 1;

    margin-top: 16px;
    padding: 16px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(8px);
}

.pg-recap-section > h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 1000;
}

.pg-recap-stars,
.pg-recap-category-cards,
.pg-recap-special-cards,
.pg-recap-funny-cards {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 12px;
}

.pg-recap-moment {
    position: relative;
    z-index: 1;

    margin-top: 16px;
    padding: 18px;

    text-align: center;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 207, 74, 0.16),
            rgba(255, 255, 255, 0.06)
        );

    border:
        1px solid rgba(255, 220, 120, 0.26);

    box-shadow:
        0 0 24px rgba(255, 202, 56, 0.08);
}

.pg-recap-moment span {
    display: block;

    margin-bottom: 6px;

    color: #ffd85c;

    font-weight: 1000;
}

.pg-recap-moment strong {
    color: #ffffff;

    font-size: 18px;
    line-height: 1.5;
}

.pg-recap-footer {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    margin-top: 18px;
    padding: 18px 12px 4px;

    text-align: center;
}

.pg-recap-footer strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 1000;
}

.pg-recap-footer span {
    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;
    font-weight: 800;
}

.pg-recap-footer small {
    color: rgba(255, 255, 255, 0.68);

    font-size: 12px;
}

.pg-recap-footer b {
    margin-top: 3px;

    color: #63e7ff;

    font-size: 13px;
    letter-spacing: 0.5px;
}

@keyframes pgRecapReveal {
    from {
        opacity: 0;
        transform:
            translateY(18px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.pg-match-recap:not(.hidden) {
    animation:
        pgRecapReveal
        0.65s
        cubic-bezier(.2, .8, .2, 1)
        both;
}
/* ==========================================
   بطاقات إحصائيات نهاية المباراة
========================================== */

.pg-recap-stat-card {
    position: relative;

    min-height: 128px;
    padding: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    text-align: center;

    border-radius: 18px;

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.045)
        );

    border:
        1px solid rgba(255, 255, 255, 0.13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.16);

    overflow: hidden;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.pg-recap-stat-card::before {
    content: '';

    position: absolute;
    inset: -60%;

    background:
        linear-gradient(
            115deg,
            transparent 40%,
            rgba(255, 255, 255, 0.11) 50%,
            transparent 60%
        );

    transform:
        translateX(-55%)
        rotate(12deg);

    pointer-events: none;
}

.pg-recap-stat-card:hover {
    transform:
        translateY(-4px)
        scale(1.015);

    border-color:
        rgba(255, 226, 118, 0.34);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.22),
        0 0 22px rgba(255, 214, 80, 0.08);
}

.pg-recap-stat-icon {
    font-size: 30px;
    line-height: 1;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0, 0, 0, 0.22)
        );
}

.pg-recap-stat-title {
    color: #ffe275;

    font-size: 14px;
    font-weight: 1000;
}

.pg-recap-stat-team {
    color: #ffffff;

    font-size: 18px;
    font-weight: 1000;

    line-height: 1.25;
}

.pg-recap-stat-value {
    color: #6feaff;

    font-size: 15px;
    font-weight: 1000;
}

.pg-recap-stat-comment {
    margin-top: 2px;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
}

.pg-recap-stat-card.pg-recap-gold {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 215, 80, 0.2),
            transparent 58%
        ),
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.045)
        );

    border-color:
        rgba(255, 215, 80, 0.27);
}

.pg-recap-stat-card.pg-recap-funny {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 94, 140, 0.14),
            transparent 58%
        ),
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.04)
        );
}

@keyframes pgRecapCardPop {
    from {
        opacity: 0;
        transform:
            translateY(14px)
            scale(0.92);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.pg-match-recap:not(.hidden)
.pg-recap-stat-card {
    animation:
        pgRecapCardPop
        0.5s
        cubic-bezier(.2, .85, .25, 1)
        both;
}

.pg-match-recap:not(.hidden)
.pg-recap-stat-card:nth-child(2) {
    animation-delay: 0.07s;
}

.pg-match-recap:not(.hidden)
.pg-recap-stat-card:nth-child(3) {
    animation-delay: 0.14s;
}

.pg-match-recap:not(.hidden)
.pg-recap-stat-card:nth-child(4) {
    animation-delay: 0.21s;
}
/* ==========================================
   مؤثرات حركة وإضاءة ملخص المباراة
========================================== */

@keyframes pgRecapGlowPulse {
    0%,
    100% {
        box-shadow:
            0 22px 55px rgba(0, 0, 0, 0.35),
            0 0 18px rgba(255, 215, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    50% {
        box-shadow:
            0 24px 65px rgba(0, 0, 0, 0.42),
            0 0 42px rgba(255, 215, 0, 0.14),
            0 0 60px rgba(0, 229, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.pg-match-recap:not(.hidden) {
    animation:
        pgRecapReveal
        0.65s
        cubic-bezier(.2, .8, .2, 1)
        both,
        pgRecapGlowPulse
        3.8s
        ease-in-out
        0.7s
        infinite;
}

.pg-match-recap::before {
    animation:
        pgRecapOrbOne
        5s
        ease-in-out
        infinite;
}

.pg-match-recap::after {
    animation:
        pgRecapOrbTwo
        6s
        ease-in-out
        infinite;
}

@keyframes pgRecapOrbOne {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-20px, 18px, 0)
            scale(1.14);
    }
}

@keyframes pgRecapOrbTwo {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(22px, -16px, 0)
            scale(1.12);
    }
}

@keyframes pgRecapChampionPop {
    0% {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(0.82);
    }

    65% {
        opacity: 1;
        transform:
            translateY(2px)
            scale(1.08);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.pg-match-recap:not(.hidden)
#pg-recap-champion {
    animation:
        pgRecapChampionPop
        0.85s
        cubic-bezier(.2, .9, .25, 1)
        0.18s
        both;
}

@keyframes pgRecapShineSweep {
    0% {
        transform:
            translateX(-180%)
            skewX(-18deg);
    }

    100% {
        transform:
            translateX(320%)
            skewX(-18deg);
    }
}

.pg-recap-header::after {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 28%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.13),
            transparent
        );

    pointer-events: none;

    opacity: 0;
}

.pg-match-recap:not(.hidden)
.pg-recap-header::after {
    opacity: 1;

    animation:
        pgRecapShineSweep
        2.2s
        ease-in-out
        0.5s
        1;
}

@keyframes pgRecapMomentPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }
}

.pg-match-recap:not(.hidden)
.pg-recap-moment {
    animation:
        pgRecapMomentPulse
        2.6s
        ease-in-out
        1.2s
        infinite;
}
/* ==========================================
   توسيع شاشة نهاية المباراة للملخص الجديد
========================================== */

#match-end-overlay .match-end-card {
    width: min(1080px, 94vw);
    max-width: 1080px;

    max-height: 94vh;
    overflow-y: auto;

    padding: 26px 28px 24px;
}

#match-end-overlay .match-end-scores {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

#match-end-overlay .match-end-card::-webkit-scrollbar {
    width: 8px;
}

#match-end-overlay .match-end-card::-webkit-scrollbar-thumb {
    background:
        rgba(23, 61, 121, 0.28);

    border-radius: 999px;
}

@media (max-width: 700px) {

    #match-end-overlay .match-end-card {
        width: 94vw;
        padding: 20px 14px;
    }

    #match-end-overlay .match-end-scores {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .pg-match-recap {
        padding: 14px;
        border-radius: 20px;
    }

    .pg-recap-stars,
    .pg-recap-category-cards,
    .pg-recap-special-cards,
    .pg-recap-funny-cards {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .pg-recap-stat-card {
        min-height: 112px;
        padding: 12px 9px;
    }

    .pg-recap-stat-team {
        font-size: 15px;
    }

    .pg-recap-stat-value {
        font-size: 13px;
    }
}
/* ==========================================
   زر مشاركة نتيجة المباراة
========================================== */

.pg-share-match-recap {
    position: relative;

    margin-top: 18px;

    background:
        linear-gradient(
            135deg,
            #21c66b,
            #11a857
        );

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
        0 10px 24px rgba(16, 168, 87, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.pg-share-match-recap:hover {
    transform:
        translateY(-2px)
        scale(1.015);

    box-shadow:
        0 14px 30px rgba(16, 168, 87, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.pg-share-match-recap::after {
    content: '';

    position: absolute;

    top: -40%;
    left: -45%;

    width: 30%;
    height: 180%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.32),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events: none;
}

.pg-share-match-recap:hover::after {
    animation:
        pgShareButtonShine
        0.75s
        ease
        1;
}

@keyframes pgShareButtonShine {
    from {
        left: -45%;
    }

    to {
        left: 120%;
    }
}
/* ==========================================
   إزالة تكرار شاشة النهاية القديمة
   عند استخدام ملخص PuzzGo الجديد
========================================== */

#match-end-overlay .match-end-card > #match-end-title,
#match-end-overlay .match-end-card > #match-end-winner,
#match-end-overlay .match-end-card > .match-end-scores,
#match-end-overlay .match-end-card > hr:first-of-type {
    display: none;
}

#match-end-overlay .pg-match-recap {
    margin-top: 0;
}

/* تثبيت وتحسين مكان أزرار التحكيم */
#game-screen #judgement-btns {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;

    margin-top: 15px !important;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;

    align-items: stretch !important;
}

/* تبقى المساحة موجودة عندما تختفي الأزرار */
#game-screen #judgement-btns.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ترتيب النص داخل الأزرار */
#game-screen #btn-first-team,
#game-screen #btn-no-winner,
#game-screen #btn-second-team {
    height: 66px !important;
    min-height: 66px !important;

    padding: 6px 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    white-space: normal !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
}
/* رسالة اختيار رقم مكان المؤقت */
#timer-box {
    position: relative !important;
}

#timer-box.is-idle .normal-timer-info,
#timer-box.is-idle .normal-timer-bar {
    visibility: hidden !important;
}

#timer-box.is-idle::after {
    content: attr(data-idle-message);

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;
    box-sizing: border-box;

    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    line-height: 1.4;

    visibility: visible !important;
    opacity: 1 !important;
}
/* =========================================
   خلفية ذكية للصور الطولية داخل البازل
========================================= */

#game-screen .puzzle-image.portrait-background {
    position: relative !important;
    overflow: hidden !important;
    background: #071a3c !important;
}

/* نسخة مكبرة ومموهة من نفس الصورة */
#game-screen .puzzle-image.portrait-background::before {
    content: "";

    position: absolute;
    inset: -24px;

    background-image: var(--portrait-bg-image);
    background-size: cover;
    background-position: center;

    filter: blur(18px) brightness(0.55);
    transform: scale(1.08);

    z-index: 0;
}

/* الصورة الأصلية الواضحة في المنتصف */
#game-screen .puzzle-image.portrait-background > #puzzle-image {
    z-index: 1 !important;

    object-fit: contain !important;
    object-position: center !important;
}

/* شبكة قطع البازل تبقى فوق الجميع */
#game-screen .puzzle-image.portrait-background > #puzzle-grid {
    z-index: 2 !important;
}
/* =========================================
   زر خروج لعبة الشبكة
   ========================================= */

#pg-hex-game-screen .pg-hex-exit-button {
    position: absolute;

    top: 22px;
    right: 24px;

    z-index: 200;

    padding: 10px 18px;

    border: 2px solid rgba(255, 120, 120, 0.85);
    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #d92f45,
            #8f1427
        );

    box-shadow:
        0 5px 0 #5f0b18,
        0 9px 18px rgba(0, 0, 0, 0.30);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

#pg-hex-game-screen .pg-hex-exit-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.15);

    box-shadow:
        0 7px 0 #5f0b18,
        0 12px 22px rgba(0, 0, 0, 0.35);
}

#pg-hex-game-screen .pg-hex-exit-button:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #5f0b18,
        0 5px 10px rgba(0, 0, 0, 0.28);
}
#pg-hex-game-screen .pg-hex-exit-button {
    position: fixed !important;
    top: 170px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 999999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* ==========================================
   PuzzGo - شاشة الانتقال السينمائية
   مؤشر تقدم الجولات
========================================== */

.round-transition-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    padding: 9px 20px;
    margin: 0 auto 14px;
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 999px;
    color: #ffe88a;
    background:
        linear-gradient(
            135deg,
            rgba(255, 215, 0, 0.16),
            rgba(255, 255, 255, 0.05)
        );
    box-shadow:
        0 0 22px rgba(255, 215, 0, 0.18),
        inset 0 0 12px rgba(255, 255, 255, 0.06);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.3px;
}
.round-transition-match-score {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
    align-items: center;
    gap: 14px;
    width: min(100%, 540px);
    margin: 18px auto;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: rgba(5, 18, 48, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 14px 35px rgba(0, 0, 0, 0.22);
}

.round-transition-score-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.round-transition-score-team span {
    overflow: hidden;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-transition-score-team strong {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding: 0 10px;
    border-radius: 16px;
    color: #071630;
    background: linear-gradient(145deg, #fff5ae, #ffc928);
    box-shadow: 0 7px 18px rgba(255, 201, 40, 0.28);
    font-size: 24px;
    font-weight: 1000;
}

.round-transition-score-separator {
    color: rgba(255, 255, 255, 0.55);
    font-size: 25px;
    font-weight: 900;
}
.round-transition-next-info {
    width: min(100%, 520px);
    margin: 18px auto 14px;
    padding: 15px 18px;
    border-right: 4px solid #27d8ff;
    border-radius: 16px;
    background:
        linear-gradient(
            90deg,
            rgba(39, 216, 255, 0.16),
            rgba(39, 216, 255, 0.04)
        );
    text-align: right;
}

.round-transition-next-mode {
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 1000;
}

.round-transition-starter {
    color: #aeeeff;
    font-size: 15px;
    font-weight: 800;
}
.round-transition-countdown {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 14px auto;
    border: 3px solid rgba(255, 215, 0, 0.9);
    border-radius: 50%;
    color: #ffffff;
    background:
        radial-gradient(
            circle,
            rgba(255, 215, 0, 0.24),
            rgba(6, 19, 48, 0.94) 68%
        );
    box-shadow:
        0 0 24px rgba(255, 215, 0, 0.35),
        inset 0 0 14px rgba(255, 215, 0, 0.16);
    font-size: 27px;
    font-weight: 1000;
    animation: pgRoundCountdownPulse 1s ease-in-out infinite;
}

@keyframes pgRoundCountdownPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 18px rgba(255, 215, 0, 0.26),
            inset 0 0 12px rgba(255, 215, 0, 0.14);
    }

    50% {
        transform: scale(1.09);
        box-shadow:
            0 0 34px rgba(255, 215, 0, 0.5),
            inset 0 0 18px rgba(255, 215, 0, 0.22);
    }
}
/* المظهر السينمائي لشاشة انتقال الجولات */
.round-complete-overlay {
    padding: 18px;
    overflow-y: auto;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(13, 115, 255, 0.34),
            transparent 42%
        ),
        rgba(1, 7, 24, 0.9);
    backdrop-filter: blur(10px);
}

.round-complete-card {
    position: relative;
    width: min(94%, 620px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid rgba(255, 215, 0, 0.32);
    border-radius: 30px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            rgba(9, 31, 76, 0.98),
            rgba(3, 13, 37, 0.98)
        );
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.58),
        0 0 45px rgba(20, 133, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.round-complete-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255, 255, 255, 0.08) 42%,
            transparent 64%
        );
}

.round-complete-icon {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.52));
}

#round-complete-title {
    margin: 4px 0 10px;
    color: #ffffff;
    font-size: clamp(25px, 4vw, 36px);
    font-weight: 1000;
}

.round-complete-team {
    color: #ffe36d;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.28);
}

.round-complete-image {
    margin-bottom: 15px;
    color: #cbdcff;
}

.round-complete-box {
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
}

.round-complete-box span {
    color: #b9c9ea;
}

.round-complete-box strong {
    color: #62e8ff;
}

.round-complete-next {
    position: relative;
    background:
        linear-gradient(
            135deg,
            #078cff,
            #0050d8
        );
    box-shadow:
        0 12px 28px rgba(0, 108, 255, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@media (max-width: 620px) {
    .round-complete-card {
        width: 96%;
        padding: 20px 15px;
        border-radius: 24px;
    }

    .round-transition-match-score {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .round-transition-score-team {
        justify-content: space-between;
        width: 100%;
    }

    .round-transition-score-separator {
        display: none;
    }

    .round-transition-next-info {
        text-align: center;
        border-right: 0;
        border-top: 3px solid #27d8ff;
    }

    .round-complete-score-row {
        gap: 9px;
        margin-bottom: 18px;
    }

    .round-complete-box {
        padding: 11px 8px;
    }

    .round-complete-next {
        font-size: 18px;
        padding: 14px;
    }
}
/* ==========================================
   إصلاح نهائي لشاشة انتقال الجولات
   سينمائية - مضغوطة - بدون Scroll
========================================== */

.round-complete-overlay {
    padding: 0 !important;
    overflow: hidden !important;
}

.round-complete-card {
    width: min(92vw, 880px) !important;
    height: min(88vh, 630px) !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 22px 38px !important;
    border: 2px solid rgba(255, 215, 0, 0.5) !important;
    border-radius: 38px !important;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(20, 126, 255, 0.36),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #10295c 0%,
            #061633 52%,
            #020a1d 100%
        ) !important;
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.68),
        0 0 70px rgba(0, 119, 255, 0.28),
        inset 0 0 55px rgba(32, 116, 255, 0.09) !important;
}

/* معلومات مكررة ظهرت في احتفال الفوز السابق */
.round-complete-image,
.round-complete-score-row {
    display: none !important;
}

.round-transition-progress {
    margin: 0 auto 3px !important;
    padding: 7px 19px !important;
}

.round-complete-icon {
    margin: 0 !important;
    font-size: 58px !important;
    line-height: 1;
    animation: pgRoundTrophyFloat 2s ease-in-out infinite;
}

#round-complete-title {
    margin: 2px 0 !important;
    font-size: clamp(27px, 4vw, 41px) !important;
    line-height: 1.15;
}

.round-complete-team {
    margin: 0 !important;
    font-size: clamp(21px, 3vw, 29px) !important;
}

.round-transition-match-score {
    margin: 8px auto !important;
    padding: 10px 17px !important;
}

.round-transition-next-info {
    margin: 5px auto !important;
    padding: 10px 16px !important;
}

.round-transition-countdown {
    width: 48px !important;
    height: 48px !important;
    margin: 5px auto !important;
    font-size: 23px !important;
}

.round-complete-next {
    width: min(100%, 390px) !important;
    margin-top: 2px;
    padding: 13px 20px !important;
    font-size: 19px !important;
}

@keyframes pgRoundTrophyFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.06);
    }
}

@media (max-height: 700px) {
    .round-complete-card {
        height: 94vh !important;
        gap: 5px;
        padding: 12px 25px !important;
    }

    .round-complete-icon {
        font-size: 45px !important;
    }

    .round-transition-match-score {
        margin: 3px auto !important;
    }

    .round-transition-countdown {
        width: 42px !important;
        height: 42px !important;
        margin: 2px auto !important;
    }
}
/* الأقرب يكسب — زر إظهار الإجابة */
#closest-wins-show-answer {
    display: block;
    width: fit-content;
    min-width: 200px;
    min-height: 46px;
    padding: 10px 24px;
    margin: 14px auto 0;
    font-size: 18px;
}

/* الأقرب يكسب — زر متابعة النتيجة */
#closest-wins-continue-button {
    width: fit-content;
    min-width: 190px;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* تكبير أسماء باقات الجولات في بطاقة الرصيد */
#setup-screen .pg-setup-credit > span {
    font-size: 17px !important;
    font-weight: 900 !important;
}
#setup-screen .pg-setup-credit > small {
    font-size: 15px !important;
    font-weight: 800 !important;
}
/* ==========================================
   حجم أرقام البازل حسب عدد القطع
========================================== */

/* الجولة 1 — 120 قطعة */
#puzzle-grid .puzzle-tile {
    font-size: 17px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* الجولة 2 و3 — 130 / 140 قطعة */
#puzzle-grid:has(.puzzle-tile:nth-child(121)) .puzzle-tile {
    font-size: 16px !important;
}

/* الجولة 4 — 150 قطعة */
#puzzle-grid:has(.puzzle-tile:nth-child(141)) .puzzle-tile {
    font-size: 15px !important;
}

/* الجولة 5 — 160 قطعة */
#puzzle-grid:has(.puzzle-tile:nth-child(151)) .puzzle-tile {
    font-size: 14px !important;
}
/* صاحب الظل الطويل - الشبكة فقط - منع السكرول */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-question-card {
    overflow: hidden !important;
    max-height: 94dvh !important;
}
/* ==================================================
   صاحب الظل الطويل - الشبكة فقط
   نفس الأشكال المتحركة الموجودة في البازل
   ================================================== */

/* مخفية في باقي فئات الشبكة */
#pg-hex-question-overlay
.pg-hex-silhouette-bg {
    display: none !important;
}

/* تظهر فقط في صاحب الظل */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;

    z-index: 1 !important;
}

/* إبقاء محتوى السؤال فوق الأشكال */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-question-card {
    position: relative !important;
    z-index: 20 !important;
}

/* شكل الدوائر */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span {
    position: absolute !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 90px !important;
    height: 90px !important;

    border: 1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50% !important;

    background:
        rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(5px);

    box-shadow:
        0 0 35px
        rgba(78, 146, 255, 0.10);

    opacity: 0.25;

    animation:
        silhouetteFloat
        10s
        ease-in-out
        infinite;
}

/* الرموز */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span::before {
    font-size: 44px;

    filter:
        grayscale(1)
        brightness(2);

    opacity: 0.72;
}

/* 👤 */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(1) {
    top: 10%;
    left: 8%;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(1)::before {
    content: "👤";
}

/* ؟ */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(2) {
    top: 18%;
    right: 11%;

    width: 115px !important;
    height: 115px !important;

    animation-delay: -3s;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(2)::before {
    content: "؟";
    font-size: 66px;
    font-weight: 900;
}

/* 🔎 */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(3) {
    bottom: 13%;
    left: 13%;

    animation-delay: -5s;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(3)::before {
    content: "🔎";
}

/* 🎭 */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(4) {
    bottom: 9%;
    right: 12%;

    width: 110px !important;
    height: 110px !important;

    animation-delay: -7s;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(4)::before {
    content: "🎭";
}

/* 👤 */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(5) {
    top: 46%;
    left: 3%;

    width: 68px !important;
    height: 68px !important;

    animation-delay: -2s;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(5)::before {
    content: "👤";
    font-size: 32px;
}

/* ؟ */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(6) {
    top: 52%;
    right: 4%;

    width: 72px !important;
    height: 72px !important;

    animation-delay: -6s;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-silhouette-bg span:nth-child(6)::before {
    content: "?";
    font-size: 40px;
    font-weight: 900;
}
/* ==================================================
   صاحب الظل الطويل - HEX
   تصميم كامل مثل نسخة البازل
   ================================================== */

html body
#pg-hex-question-overlay.pg-hex-silhouette-mode {
    overflow: hidden !important;
}

/* البطاقة الرئيسية */
html body
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-question-card {
    position: relative !important;
    z-index: 20 !important;

    width: min(900px, calc(100vw - 320px)) !important;
    height: calc(100dvh - 38px) !important;

    min-height: 0 !important;
    max-height: calc(100dvh - 38px) !important;

    margin: auto !important;
    padding: 24px 34px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    border: 3px solid #f6ca3c !important;
    border-radius: 30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 30, 67, 0.94),
            rgba(14, 42, 88, 0.92)
        ) !important;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* رقم الخلية غير مطلوب داخل هذه الفئة */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-question-cell-number {
    display: none !important;
}

/* عنوان السؤال */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-question-text {
    margin: 0 0 18px !important;
    padding: 10px 28px !important;

    font-size: clamp(28px, 2.4vw, 39px) !important;
    font-weight: 900 !important;

    color: #ffffff !important;

    border-radius: 999px !important;

    background:
        rgba(9, 18, 60, 0.42) !important;

    border:
        1px solid rgba(145, 198, 255, 0.25) !important;

    backdrop-filter: blur(12px);
}

/* صورة الظل في صفحة السؤال */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-question-image:not(.pg-hex-hidden) {
    display: block !important;

    width: min(330px, 40vw) !important;
    height: min(300px, 42vh) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 12px !important;

    object-fit: contain !important;

    border:
        3px solid rgba(142, 203, 255, .76) !important;

    border-radius: 26px !important;

    background: #ffffff !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.42),
        0 0 32px rgba(69,155,255,.24) !important;
}

/* زر إظهار الإجابة */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 245px !important;

    margin: 20px auto 0 !important;
    padding: 13px 38px !important;

    border: 0 !important;
    border-radius: 17px !important;

    font-size: 20px !important;
    font-weight: 900 !important;

    color: #382100 !important;

    background:
        linear-gradient(
            135deg,
            #fff0a0,
            #ffc642,
            #ff9e21
        ) !important;

    box-shadow:
        0 7px 0 #a95a00,
        0 16px 30px rgba(0,0,0,.34) !important;
}

/* ==================================================
   عند فتح الإجابة
   ================================================== */

/* إخفاء سؤال وصورة المرحلة الأولى */
#pg-hex-question-overlay.pg-hex-silhouette-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-text,

#pg-hex-question-overlay.pg-hex-silhouette-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
#pg-hex-question-image {
    display: none !important;
}

/* منطقة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    align-items: center !important;
    justify-content: center !important;

    column-gap: 28px !important;
    row-gap: 10px !important;

    width: min(760px, 100%) !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 18px 24px !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(130,195,255,.24) !important;

    border-radius: 28px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10,21,65,.72),
            rgba(20,18,68,.58)
        ) !important;

    backdrop-filter: blur(18px);

    overflow: hidden !important;
}

/* الصورتان جنب بعض */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-shadow-image,

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-image {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: min(280px, 38vh) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 10px !important;

    object-fit: contain !important;

    border-radius: 22px !important;

    border:
        2px solid rgba(255,255,255,.35) !important;

    background: #ffffff !important;

    box-sizing: border-box !important;

    box-shadow:
        0 14px 32px rgba(0,0,0,.34) !important;
}

/* إخفاء عبارة "الإجابة الصحيحة" القديمة */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-area > span {
    display: none !important;
}

/* اسم الشخصية */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-text {
    grid-column: 1 / -1 !important;

    margin: 2px 0 0 !important;

    text-align: center !important;

    font-size: clamp(25px, 2vw, 34px) !important;
    font-weight: 900 !important;

    color: #ffffff !important;
}

/* أزرار التحكيم أسفل الصورتين */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    width: min(760px, 100%) !important;

    margin: 14px auto 0 !important;

    gap: 12px !important;

    transform: none !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-judgement-buttons button {
    min-width: 0 !important;
    min-height: 52px !important;

    padding: 9px 12px !important;

    font-size: 17px !important;
}
/* ==================================================
   صاحب الظل HEX - ضبط توزيع صفحة السؤال
   ================================================== */

#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-question-card {
    justify-content: flex-start !important;

    padding-top: 72px !important;
    padding-bottom: 22px !important;
}

/* رفع عنوان السؤال */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-question-text {
    margin:
        0
        auto
        20px !important;

    flex: none !important;
}

/* تكبير صورة الظل واستغلال المساحة */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-question-image:not(.pg-hex-hidden) {
    width: min(440px, 48vw) !important;
    height: min(330px, 43vh) !important;

    flex: none !important;

    margin:
        0
        auto !important;
}

/* رفع زر إظهار الإجابة */
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    margin:
        18px
        auto
        0 !important;

    flex: none !important;
}
/* ==================================================
   صاحب الظل HEX - الترتيب النهائي لصفحة السؤال
   ================================================== */

/* فقط قبل فتح الإجابة */
#pg-hex-question-overlay.pg-hex-silhouette-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
.pg-hex-question-card {
    position: relative !important;

    display: block !important;

    padding: 0 !important;

    overflow: hidden !important;
}

/* إلغاء أي مساحة فارغة من الهيدر */
#pg-hex-question-overlay.pg-hex-silhouette-mode
.pg-hex-question-header {
    display: none !important;
}

/* عنوان السؤال - أعلى */
#pg-hex-question-overlay.pg-hex-silhouette-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-text {
    position: absolute !important;

    top: 42px !important;
    left: 50% !important;

    width: max-content !important;
    max-width: 80% !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 40 !important;
}

/* صورة الظل - أكبر وفي المنتصف */
#pg-hex-question-overlay.pg-hex-silhouette-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-question-image:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 135px !important;
    left: 50% !important;

    width: min(500px, 58vw) !important;
    height: min(370px, 49vh) !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;
}

/* زر إظهار الإجابة - ثابت وواضح أسفل البطاقة */
#pg-hex-question-overlay.pg-hex-silhouette-mode:not(
    :has(#pg-hex-answer-area:not(.pg-hex-hidden))
)
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: absolute !important;

    left: 50% !important;
    bottom: 22px !important;

    width: 260px !important;
    min-height: 58px !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 60 !important;
}
/* إصلاح نهائي لزر إظهار الإجابة - صاحب الظل في Hex */
html body
#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-show-answer:not(.pg-hex-hidden) {
    position: absolute !important;

    top: auto !important;
    right: auto !important;
    bottom: 18px !important;
    left: 50% !important;

    width: auto !important;
    min-width: 270px !important;
    max-width: 340px !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 9px 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transform: translateX(-50%) !important;

    z-index: 100 !important;

    overflow: hidden !important;
}
/* صاحب الظل HEX - ضغط صفحة الإجابة وترتيبها */
#pg-hex-question-overlay.pg-hex-silhouette-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-question-card {
    justify-content: center !important;
    padding: 28px 36px !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(820px, 88%) !important;

    grid-template-columns:
        repeat(2, minmax(280px, 1fr)) !important;

    column-gap: 24px !important;
    row-gap: 10px !important;

    padding: 18px 22px 20px !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-shadow-image,

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-image {
    height: 300px !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-text {
    margin: 0 !important;
}
/* صاحب الظل HEX - شد صفحة الإجابة حول المحتوى */
#pg-hex-question-overlay.pg-hex-silhouette-mode:has(
    #pg-hex-answer-area:not(.pg-hex-hidden)
)
.pg-hex-question-card {
    width: min(900px, calc(100vw - 320px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 38px) !important;

    padding: 24px 26px 20px !important;

    justify-content: center !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(760px, 100%) !important;

    grid-template-columns:
        repeat(2, minmax(250px, 1fr)) !important;

    column-gap: 26px !important;
    row-gap: 8px !important;

    padding: 18px 20px 14px !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-shadow-image,

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-image {
    height: 275px !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-answer-text {
    margin-top: 0 !important;
}

#pg-hex-question-overlay.pg-hex-silhouette-mode
#pg-hex-judgement-buttons:not(.pg-hex-hidden) {
    margin-top: 10px !important;
}
/* توسيط اسم الفريق - نغمة وأغنية */
#nagham-song-team {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    line-height: 1.2 !important;
}
/* =========================================
   HEX - ألوان تحكيم ثابتة
   الفريق الأول أحمر / الثاني أخضر / لا أحد أزرق
   ========================================= */

/* الفريق الأول */
#pg-hex-question-overlay
#pg-hex-correct-button {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

/* الفريق الثاني */
#pg-hex-question-overlay
#pg-hex-second-team-button {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

/* لا أحد */
#pg-hex-question-overlay
#pg-hex-wrong-button {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* =========================================
   نغمة وأغنية - عند التشغيل داخل HEX فقط
   ========================================= */

#nagham-song-overlay[data-game-mode="hex"]
#nagham-song-team-one {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#nagham-song-overlay[data-game-mode="hex"]
#nagham-song-team-two {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

#nagham-song-overlay[data-game-mode="hex"]
#nagham-song-no-one {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* =========================================
   PUZZLE - ألوان تحكيم ثابتة
   حروف متحركة + جاي بالغلط
   ========================================= */

/* حروف متحركة - الفريق الأول */
#moving-letters-first-team {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

/* حروف متحركة - الفريق الثاني */
#moving-letters-second-team {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

/* حروف متحركة - لا أحد */
#moving-letters-no-winner {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}


/* جاي بالغلط - الفريق الأول */
#odd-one-out-first-team {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

/* جاي بالغلط - الفريق الثاني */
#odd-one-out-second-team {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

/* جاي بالغلط - لا أحد */
#odd-one-out-no-winner {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* =========================================
   PUZZLE - ألوان تحكيم ثابتة
   عادي + زوم + جيبها + لا ترمش
   ========================================= */

/* الأسئلة العادية */
#btn-first-team,
#zoom-correct-button,
#bring-it-team1-button,
#dont-blink-first-team {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#btn-second-team,
#zoom-wrong-button,
#bring-it-team2-button,
#dont-blink-second-team {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

#btn-no-winner,
#zoom-no-winner-button,
#bring-it-none-button,
#dont-blink-no-winner {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* =========================================
   PUZZLE - صاحب الظل + اسمع وركز
   ========================================= */

/* صاحب الظل */
#silhouette-first-team,
#listen-focus-first-team {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#silhouette-second-team,
#listen-focus-second-team {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

#silhouette-no-team,
#listen-focus-no-winner {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* =========================================
   PUZZLE - نغمة وأغنية + الأقرب يكسب
   ========================================= */

/* نغمة وأغنية */
#nagham-song-overlay:not([data-game-mode="hex"])
#nagham-song-team-one,

#closest-wins-team1-button {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#nagham-song-overlay:not([data-game-mode="hex"])
#nagham-song-team-two,

#closest-wins-team2-button {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

#nagham-song-overlay:not([data-game-mode="hex"])
#nagham-song-no-one,

#closest-wins-no-one-button {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}

/* =========================================
   ZOOM - توحيد الصورتين + توسيط الإجابة
   ========================================= */

.zoom-image-container.zoom-answer-comparison {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 24px !important;
}

/* الصورتان نفس الصندوق تمامًا */
.zoom-image-container.zoom-answer-comparison
#zoom-question-image,

.zoom-image-container.zoom-answer-comparison
#zoom-original-image {
    width: calc(50% - 12px) !important;
    height: 260px !important;

    object-fit: contain !important;

    display: block !important;
    align-self: stretch !important;

    background: #ffffff !important;
}

/* توسيط صندوق الإجابة */
#zoom-answer-display {
    width: 100% !important;
    text-align: center !important;
}

/* توسيط نص الإجابة نفسه */
#zoom-answer-text {
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#btn-exit-game,
#pg-hex-exit-button {
    position: fixed !important;

    left: 14px !important;
    bottom: 18px !important;

    top: auto !important;
    right: auto !important;

    z-index: 9999 !important;

    transform: scale(0.9) !important;
    transform-origin: bottom left !important;
}
html body #btn-exit-game,
html body #pg-hex-game-screen .pg-hex-exit-button,
html body #pg-hex-exit-button {
    position: fixed !important;

    top: auto !important;
    right: auto !important;

    left: 10px !important;
    bottom: 6px !important;

    z-index: 99999 !important;

    transform: scale(0.72) !important;
    transform-origin: bottom left !important;
}
/* =========================================
   FLAGS - ألوان التحكيم الصحيحة
   ========================================= */

#flags-first-team-button {
    background:
        linear-gradient(
            135deg,
            #ff5a6f,
            #c91f3d
        ) !important;

    border-color: #ff8797 !important;
    color: #ffffff !important;
}

#flags-second-team-button {
    background:
        linear-gradient(
            135deg,
            #51e58d,
            #159957
        ) !important;

    border-color: #7ff0aa !important;
    color: #ffffff !important;
}

#flags-no-winner-button {
    background:
        linear-gradient(
            135deg,
            #64748b,
            #334155
        ) !important;

    border-color: #94a3b8 !important;
    color: #ffffff !important;
}
/* إزالة ألوان الطبقة القديمة تحت أزرار تحكيم الشبكة */
#pg-hex-correct-button,
#pg-hex-second-team-button,
#pg-hex-wrong-button {
    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.35),
        0 10px 18px rgba(0, 0, 0, 0.25) !important;
}

#pg-hex-correct-button::before,
#pg-hex-correct-button::after,
#pg-hex-second-team-button::before,
#pg-hex-second-team-button::after,
#pg-hex-wrong-button::before,
#pg-hex-wrong-button::after {
    background: transparent !important;
}
html body
#pg-hex-question-overlay.pg-hex-zoom-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 130px !important;
    left: 55px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;

    margin: 0 !important;

    transform: none !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    text-align: center !important;

    z-index: 99999 !important;
}
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:not(
    :has(#pg-hex-answer-image:not(.pg-hex-hidden))
)
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 130px !important;
    left: 55px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* زوم الشبكة - صفحة الإجابة فقط */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-team-name {
    display: none !important;
}

/* زوم الشبكة - ترتيب صفحة الإجابة */
html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area {
    display: contents !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-image {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-question-image {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-area > span {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    text-align: center !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-answer-text {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    text-align: center !important;
}

html body
#pg-hex-question-overlay.pg-hex-zoom-mode:has(
    #pg-hex-answer-image:not(.pg-hex-hidden)
)
#pg-hex-judgement-buttons {
    grid-row: 5 !important;
}
html body
#pg-hex-question-overlay.pg-hex-listen-focus-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 124px !important;
    left: 43px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* شوف وركّز: تثبيت اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-focus-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 124px !important;
    left: 43px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* الحروف المتحركة: تثبيت اسم الفريق تحت المؤقت */
html body
#pg-hex-question-overlay.pg-hex-moving-letters-mode
#pg-hex-question-team-name:not(.pg-hex-hidden) {
    position: absolute !important;

    top: 112px !important;
    left: 18px !important;
    right: auto !important;

    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;

    margin: 0 !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;

    z-index: 99999 !important;
}
/* جاي بالغلط - رفع صندوق الإجابة الصحيحة */
html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
    position: relative !important;
    top: -55px !important;
}
/* جاي بالغلط - تكبير صندوق الإجابة */
html body
#pg-hex-question-overlay.pg-hex-odd-one-out-mode
.pg-hex-answer-area:not(.pg-hex-hidden) {
    width: min(980px, 92vw) !important;
    max-width: 980px !important;
}

/* ==================================================
   زوم البازل — التصميم النهائي المعتمد
   خاص بالبازل فقط
   ================================================== */

html body #zoom-question-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 15% 22%,
            rgba(40, 196, 255, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 72%,
            rgba(154, 76, 255, 0.24),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #02091d 0%,
            #071b48 42%,
            #17104c 74%,
            #04081c 100%
        ) !important;
}


/* بدون نقاط بالخلفية */
html body #zoom-question-overlay::before {
    content: none !important;
}


/* البطاقة الرئيسية */
html body #zoom-question-card {
    position: relative !important;
    z-index: 2 !important;

    width: 100vw !important;
    height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 12px 30px 16px !important;
    gap: 4px !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(30, 130, 220, 0.14),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(3, 18, 54, 0.76),
            rgba(23, 14, 73, 0.72)
        ) !important;

    box-shadow:
        inset 0 0 120px
        rgba(0, 0, 0, 0.30) !important;
}


/* العدسة الكبيرة المتحركة */
html body #zoom-question-card::before {
    content: "🔍" !important;

    position: absolute !important;
    z-index: 0 !important;

    top: 7% !important;
    right: 5% !important;

    width: auto !important;
    height: auto !important;

    font-size:
        clamp(80px, 9vw, 140px) !important;

    opacity: 0.17 !important;

    background: none !important;
    border: 0 !important;

    filter:
        drop-shadow(
            0 0 26px
            rgba(73, 218, 255, 0.48)
        ) !important;

    pointer-events: none !important;

    animation:
        pgPuzzleZoomLensFloat
        6.8s ease-in-out
        infinite alternate !important;
}

@keyframes pgPuzzleZoomLensFloat {
    from {
        translate: 0 0;
        rotate: -9deg;
        scale: 0.92;
    }

    to {
        translate: -38px 27px;
        rotate: 9deg;
        scale: 1.06;
    }
}


/* رموز الزوم المتحركة */
html body #zoom-question-card::after {
    content:
        "🔎   ◉   🔍   ◎" !important;

    position: absolute !important;
    z-index: 0 !important;

    bottom: 7% !important;
    left: 4% !important;

    width: auto !important;
    height: auto !important;

    font-size:
        clamp(46px, 5vw, 78px) !important;

    color:
        rgba(255, 255, 255, 0.16) !important;

    background: none !important;
    border: 0 !important;

    pointer-events: none !important;

    animation:
        pgPuzzleZoomIconsFloat
        8s ease-in-out
        infinite alternate !important;
}

@keyframes pgPuzzleZoomIconsFloat {
    from {
        translate: 0 0;
        rotate: 3deg;
    }

    to {
        translate: 35px -18px;
        rotate: -4deg;
    }
}


/* عنوان السؤال */
html body
#zoom-question-overlay
#zoom-question-text {
    position: relative !important;
    z-index: 10 !important;

    width: max-content !important;
    max-width: 65vw !important;

    margin: 2px auto 8px !important;
    padding: 8px 26px !important;

    color: #ffffff !important;

    font-size:
        clamp(22px, 2.3vw, 34px) !important;

    font-weight: 900 !important;
    text-align: center !important;

    background:
        linear-gradient(
            90deg,
            #1765c2,
            #6841c8
        ) !important;

    border:
        2px solid #70cfff !important;

    border-radius:
        999px !important;

    box-shadow:
        0 7px 0 rgba(5, 36, 98, 0.90),
        0 13px 26px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(71, 181, 255, 0.30) !important;
}


/* الهيدر */
html body
#zoom-question-overlay
.zoom-question-header {
    position: relative !important;
    z-index: 10 !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #ffffff !important;
}


/* مساحة الصورة */
html body
#zoom-question-overlay
.zoom-image-container {
    position: relative !important;
    z-index: 5 !important;

    width:
        min(900px, 70vw) !important;

    height:
        min(300px, 39dvh) !important;

    min-height: 0 !important;

    margin: 5px auto !important;
    padding: 10px !important;

    overflow: hidden !important;

    border-radius:
        26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 27, 67, 0.76),
            rgba(24, 13, 67, 0.76)
        ) !important;

    border:
        1px solid
        rgba(104, 206, 255, 0.20) !important;
}


/* صورة السؤال */
html body
#zoom-question-overlay
#zoom-question-image {
    height:
        min(270px, 35dvh) !important;

    max-height: none !important;

    object-fit: contain !important;

    border:
        3px solid #ff9a43 !important;

    border-radius:
        22px !important;

    box-shadow:
        0 8px 0 #833c13,
        0 16px 34px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(255, 145, 55, 0.34) !important;
}


/* صفحة الإجابة */
html body
#zoom-question-overlay:has(
    #zoom-original-image:not(.hidden)
)
.zoom-image-container {
    width:
        min(980px, 74vw) !important;

    height:
        min(285px, 37dvh) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 22px !important;
}

html body
#zoom-question-overlay:has(
    #zoom-original-image:not(.hidden)
)
#zoom-question-image,

html body
#zoom-question-overlay:has(
    #zoom-original-image:not(.hidden)
)
#zoom-original-image {
    width:
        calc(50% - 11px) !important;

    height:
        min(250px, 32dvh) !important;

    margin: 0 !important;

    object-fit: contain !important;
}


/* صندوق الإجابة */
html body
#zoom-question-overlay
#zoom-answer-display:not(.hidden) {
    width: fit-content !important;

    min-width:
        220px !important;

    max-width:
        60vw !important;

    margin:
        5px auto 7px !important;

    padding:
        7px 20px !important;

    color:
        #ffffff !important;

    font-size:
        clamp(20px, 2vw, 29px) !important;

    font-weight:
        900 !important;

    text-align:
        center !important;

    background:
        linear-gradient(
            145deg,
            #0f804d,
            #064a33
        ) !important;

    border:
        2px solid
        #68f5ae !important;

    border-radius:
        15px !important;

    box-shadow:
        0 7px 0 #03452e,
        0 0 24px rgba(69, 240, 157, 0.30) !important;
}


/* صف الأزرار */
html body
#zoom-question-overlay
.zoom-action-row {
    position: relative !important;
    z-index: 20 !important;

    margin:
        4px auto 0 !important;

    min-height:
        52px !important;
}
/* ==================================================
   زوم البازل — المؤقت واسم الفريق أعلى اليسار
   ================================================== */

html body
#zoom-question-overlay
#zoom-team-timer-box {
    position: fixed !important;

    top: 24px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;

    width: 160px !important;

    margin: 0 !important;

    z-index: 1000 !important;

  
    flex-direction: column !important;
    align-items: center !important;

    gap: 6px !important;
}

html body
#zoom-question-overlay
#zoom-team-timer-label {
    width: 150px !important;
    min-width: 150px !important;

    padding: 6px 8px !important;

    font-size: 16px !important;
}

html body
#zoom-question-overlay
.zoom-team-timer-circle {
    width: 88px !important;
    height: 88px !important;
}
/* ==================================================
   زوم البازل — تصميم صندوق الإجابة
   ================================================== */

html body
#zoom-question-overlay
#zoom-answer-display:not(.hidden) {
    background:
        linear-gradient(
            145deg,
            #0b1f4d,
            #17104c
        ) !important;

    border:
        2px solid
        #ffd166 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 7px 0 #6f4a00,
        0 0 26px
        rgba(255, 209, 102, 0.30) !important;
}

html body
#zoom-question-overlay
#zoom-answer-text {
    color:
        #ffd166 !important;

    font-weight:
        1000 !important;
}
/* ==================================================
   أعلام البازل — زخارف متحركة مستقلة
   ================================================== */

html body
#flags-question-overlay
.flags-question-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* إلغاء أي زخارف قديمة تعتمد على pseudo-elements */
html body
#flags-question-overlay
.flags-question-card::before,
html body
#flags-question-overlay
.flags-question-card::after {
    content: none !important;
}

/* كل محتوى السؤال الحقيقي فوق الزخارف */
html body
#flags-question-overlay
.flags-question-card > *:not(.pg-puzzle-flags-deco) {
    position: relative !important;
    z-index: 5 !important;
}

/* الزخارف العامة */
html body
#flags-question-overlay
.pg-puzzle-flags-deco {
    position: absolute !important;
    z-index: 1 !important;

    display: block !important;

    line-height: 1 !important;

    pointer-events: none !important;
    user-select: none !important;

    opacity: .18 !important;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 0, 0, .30)
        ) !important;
}

/* 🌍 */
html body
#flags-question-overlay
.deco-globe {
    top: 6% !important;
    left: 76% !important;

    font-size: 150px !important;

    opacity: .25 !important;

    animation:
        flagsFloatA
        4.4s
        ease-in-out
        infinite alternate !important;
}

/* 🚩 */
html body
#flags-question-overlay
.deco-flag {
    top: 14% !important;
    left: 10% !important;

    font-size: 88px !important;

    opacity: .22 !important;

    animation:
        flagsFloatB
        3.6s
        ease-in-out
        infinite alternate !important;
}

/* 🧭 */
html body
#flags-question-overlay
.deco-compass {
    top: 30% !important;
    left: 84% !important;

    font-size: 96px !important;

    opacity: .17 !important;

    animation:
        flagsFloatC
        5.1s
        ease-in-out
        infinite alternate !important;
}

/* 🗺️ */
html body
#flags-question-overlay
.deco-map {
    top: 56% !important;
    left: 8% !important;

    font-size: 98px !important;

    opacity: .16 !important;

    animation:
        flagsFloatD
        4.1s
        ease-in-out
        infinite alternate !important;
}

/* 📍 */
html body
#flags-question-overlay
.deco-pin {
    top: 70% !important;
    left: 79% !important;

    font-size: 82px !important;

    opacity: .20 !important;

    animation:
        flagsFloatE
        3.9s
        ease-in-out
        infinite alternate !important;
}

/* 🏳️ */
html body
#flags-question-overlay
.deco-whiteflag {
    top: 78% !important;
    left: 28% !important;

    font-size: 86px !important;

    opacity: .15 !important;

    animation:
        flagsFloatF
        4.8s
        ease-in-out
        infinite alternate !important;
}

/* حركات مستقلة لكل شكل */

@keyframes flagsFloatA {
    from {
        transform:
            translate(0, 0)
            rotate(-6deg)
            scale(.94);
    }

    to {
        transform:
            translate(-22px, 20px)
            rotate(7deg)
            scale(1.05);
    }
}

@keyframes flagsFloatB {
    from {
        transform:
            translate(0, 0)
            rotate(-12deg)
            scale(.96);
    }

    to {
        transform:
            translate(18px, -18px)
            rotate(5deg)
            scale(1.08);
    }
}

@keyframes flagsFloatC {
    from {
        transform:
            translate(0, 0)
            rotate(10deg)
            scale(.92);
    }

    to {
        transform:
            translate(-16px, 26px)
            rotate(-8deg)
            scale(1.04);
    }
}

@keyframes flagsFloatD {
    from {
        transform:
            translate(0, 0)
            rotate(7deg)
            scale(.97);
    }

    to {
        transform:
            translate(22px, -12px)
            rotate(-6deg)
            scale(1.06);
    }
}

@keyframes flagsFloatE {
    from {
        transform:
            translate(0, 0)
            rotate(-4deg)
            scale(.95);
    }

    to {
        transform:
            translate(-20px, -20px)
            rotate(8deg)
            scale(1.07);
    }
}

@keyframes flagsFloatF {
    from {
        transform:
            translate(0, 0)
            rotate(-8deg)
            scale(.94);
    }

    to {
        transform:
            translate(26px, 12px)
            rotate(6deg)
            scale(1.05);
    }
}
/* =========================================
   زوم البازل — تكبير الصورة بعد نقل المؤقت
   ========================================= */

html body
#zoom-question-overlay
.zoom-image-container {
    width: min(1050px, 80vw) !important;
    height: min(410px, 52dvh) !important;
    min-height: 350px !important;
}

html body
#zoom-question-overlay
#zoom-question-image {
    width: 72% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    margin: 0 auto !important;
}
/* =========================================
   أعلام البازل — المؤقت واسم الفريق أعلى اليسار
   ========================================= */

html body
#flags-question-overlay
#flags-normal-timer-slot {
    position: fixed !important;

    top: 24px !important;
    left: 24px !important;
    right: auto !important;
    bottom: auto !important;

    width: 160px !important;

    margin: 0 !important;

    z-index: 1000 !important;
}

html body
#flags-question-overlay
#flags-normal-timer-slot
#timer-box {
    width: 160px !important;
    min-height: 72px !important;
}
/* =========================================
   أعلام البازل — توزيع نهائي للعناصر
   ========================================= */

html body
#flags-question-overlay
.flags-question-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding:
        28px 34px 30px !important;

    overflow: hidden !important;
}


/* عنوان السؤال */
html body
#flags-question-overlay
.flags-question-title {
    flex: 0 0 auto !important;

    margin:
        0 auto 18px !important;

    font-size:
        32px !important;

    line-height:
        1.2 !important;
}


/* مساحة العلم */
html body
#flags-question-overlay
.flags-question-image-box {
    flex:
        1 1 auto !important;

    width:
        min(760px, 88%) !important;

    height:
        auto !important;

    min-height:
        330px !important;

    max-height:
        none !important;

    margin:
        0 auto !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


/* صورة العلم نفسها */
html body
#flags-question-overlay
#flags-question-image {
    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100% !important;

    max-height:
        360px !important;

    object-fit:
        contain !important;

    margin:
        0 auto !important;
}


/* زر إظهار الإجابة */
html body
#flags-question-overlay
#flags-show-answer {
    flex:
        0 0 auto !important;

    margin:
        18px auto 8px !important;

    min-width:
        220px !important;

    min-height:
        58px !important;
}


/* صندوق الإجابة */
html body
#flags-question-overlay
#flags-answer-box {
    flex:
        0 0 auto !important;

    margin:
        14px auto 10px !important;
}


/* أزرار التحكيم */
html body
#flags-question-overlay
#flags-result-buttons {
    flex:
        0 0 auto !important;

    margin:
        12px auto 0 !important;
}


/* المؤقت يبقى مثبت أعلى اليسار */
html body
#flags-question-overlay
#flags-normal-timer-slot {
    position:
        fixed !important;
}
/* =========================================
   أعلام البازل — توزيع صفحة الإجابة النهائي
   ========================================= */

html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    padding:
        30px 34px 26px !important;

    overflow: hidden !important;
}


/* إخفاء عنوان "الإجابة الصحيحة" المكرر أعلى الصفحة */
html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
.flags-question-title {
    display: none !important;
}


/* مساحة العلم */
html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
.flags-question-image-box {
    flex:
        1 1 auto !important;

    width:
        min(760px, 88%) !important;

    height:
        auto !important;

    min-height:
        360px !important;

    max-height:
        none !important;

    margin:
        8px auto 12px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;
}


/* صورة العلم */
html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
#flags-question-image {
    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100% !important;

    max-height:
        380px !important;

    object-fit:
        contain !important;

    margin:
        0 auto !important;
}


/* صندوق الإجابة */
html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
#flags-answer-box {
    flex:
        0 0 auto !important;

    margin:
        8px auto 14px !important;

    padding:
        12px 22px !important;

    min-width:
        300px !important;

    text-align:
        center !important;
}


/* أزرار الحكم */
html body
#flags-question-overlay
.flags-question-card:has(
    #flags-answer-box:not(.hidden)
)
#flags-result-buttons {
    flex:
        0 0 auto !important;

    width:
        min(720px, 88%) !important;

    margin:
        8px auto 0 !important;
}
/* =========================================
   بدون كلام — التصميم النهائي للبازل
========================================= */

html body
#charades-overlay
.charades-card {
    position: relative !important;
    isolation: isolate !important;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(55, 135, 255, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(139, 92, 246, .16),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #081a38,
            #0d2752 55%,
            #151345
        ) !important;

    border: 2px solid rgba(76, 183, 255, .85) !important;

    box-shadow:
        0 24px 70px rgba(0,0,0,.45),
        inset 0 0 55px rgba(65,140,255,.08)
        !important;

    padding: 24px 34px 28px !important;
    overflow: hidden !important;
}

html body
#charades-overlay
.charades-card > *:not(.pg-charades-deco) {
    position: relative !important;
    z-index: 5 !important;
}

html body
#charades-overlay
.charades-header {
    margin: 0 auto 12px !important;
    text-align: center !important;
}

html body
#charades-overlay
.charades-header span {
    font-size: 44px !important;
}

html body
#charades-overlay
.charades-header h2 {
    margin: 2px 0 6px !important;
    color: #ffffff !important;
    font-size: 34px !important;
}

html body
#charades-overlay
.charades-header p {
    margin: 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 17px !important;
}

html body
#charades-overlay
#charades-qr {
    width: 210px !important;
    height: 210px !important;

    min-width: 210px !important;
    min-height: 210px !important;

    margin: 14px auto 16px !important;
    padding: 14px !important;

    border: 4px solid #3aa7ff !important;
    border-radius: 22px !important;

    background: #ffffff !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.28),
        0 0 24px rgba(58,167,255,.22)
        !important;
}

html body
#charades-overlay
#charades-qr canvas,
html body
#charades-overlay
#charades-qr img {
    width: 180px !important;
    height: 180px !important;

    min-width: 180px !important;
    min-height: 180px !important;
}

html body
#charades-overlay
#charades-start-button {
    position: static !important;
    display: block !important;

    transform: none !important;

    min-width: 190px !important;

    margin: 8px auto 20px !important;
    padding: 14px 34px !important;

    font-size: 22px !important;
}

html body
#charades-overlay
#charades-timer {
    position: fixed !important;

    top: 24px !important;
    left: 55px !important;
    right: auto !important;

    margin: 0 !important;

    z-index: 1000 !important;
}

html body
#charades-overlay
#charades-team-name {
    min-width: 170px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

html body
#charades-overlay
#charades-show-answer {
    margin: 18px auto 0 !important;
}

html body
#charades-overlay
#charades-answer-display:not(.hidden) {
    margin: 120px auto 26px !important;

    min-width: 380px !important;

    padding: 18px 28px !important;

    text-align: center !important;
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #0b1f4d,
            #17104c
        ) !important;

    border: 2px solid #ffd166 !important;

    box-shadow:
        0 7px 0 #6f4a00,
        0 0 28px rgba(255,209,102,.26)
        !important;
}

html body
#charades-overlay
#charades-answer-display strong {
    color: #ffd166 !important;
}

html body
#charades-overlay
#charades-judgement-buttons:not(.hidden) {
    width: min(720px, 88%) !important;

    margin: 26px auto 0 !important;

    justify-content: center !important;
    gap: 18px !important;
}


/* الزينة */

html body
#charades-overlay
.pg-charades-deco {
    position: absolute !important;
    z-index: 1 !important;

    pointer-events: none !important;
    user-select: none !important;

    line-height: 1 !important;

    filter:
        drop-shadow(
            0 8px 18px rgba(0,0,0,.28)
        ) !important;
}

html body #charades-overlay .deco-shh {
    top: 10% !important;
    left: 10% !important;
    font-size: 100px !important;
    opacity: .13 !important;
    animation: charadesFloatA 4.5s ease-in-out infinite alternate !important;
}

html body #charades-overlay .deco-mask {
    top: 60% !important;
    left: 8% !important;
    font-size: 120px !important;
    opacity: .12 !important;
    animation: charadesFloatB 5.2s ease-in-out infinite alternate !important;
}

html body #charades-overlay .deco-movie {
    top: 14% !important;
    right: 9% !important;
    font-size: 105px !important;
    opacity: .13 !important;
    animation: charadesFloatC 4.1s ease-in-out infinite alternate !important;
}

html body #charades-overlay .deco-eyes {
    top: 68% !important;
    right: 12% !important;
    font-size: 92px !important;
    opacity: .12 !important;
    animation: charadesFloatD 4.8s ease-in-out infinite alternate !important;
}

html body #charades-overlay .deco-star {
    top: 40% !important;
    left: 25% !important;
    font-size: 70px !important;
    opacity: .09 !important;
    animation: charadesFloatE 3.9s ease-in-out infinite alternate !important;
}

html body #charades-overlay .deco-ticket {
    top: 44% !important;
    right: 24% !important;
    font-size: 78px !important;
    opacity: .09 !important;
    animation: charadesFloatF 5.4s ease-in-out infinite alternate !important;
}

@keyframes charadesFloatA {
    from {
        transform: translate(0,0) rotate(-7deg) scale(.95);
    }

    to {
        transform: translate(20px,18px) rotate(7deg) scale(1.06);
    }
}

@keyframes charadesFloatB {
    from {
        transform: translate(0,0) rotate(8deg);
    }

    to {
        transform: translate(24px,-18px) rotate(-7deg) scale(1.05);
    }
}

@keyframes charadesFloatC {
    from {
        transform: translate(0,0) rotate(-6deg);
    }

    to {
        transform: translate(-20px,22px) rotate(7deg) scale(1.06);
    }
}

@keyframes charadesFloatD {
    from {
        transform: translate(0,0) rotate(6deg);
    }

    to {
        transform: translate(-24px,-18px) rotate(-8deg) scale(1.06);
    }
}

@keyframes charadesFloatE {
    from {
        transform: translate(0,0) scale(.94);
    }

    to {
        transform: translate(16px,-20px) scale(1.08);
    }
}

@keyframes charadesFloatF {
    from {
        transform: translate(0,0) rotate(-8deg);
    }

    to {
        transform: translate(-18px,20px) rotate(8deg) scale(1.05);
    }
}
/* بدون كلام — احترام حالة الإخفاء */
html body
#charades-overlay
#charades-start-button.hidden,
html body
#charades-overlay
#charades-show-answer.hidden {
    display: none !important;
}
/* =========================================
   بدون كلام — صفحة الإجابة
========================================= */

html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
)
.charades-header {
    margin: 0 auto 35px !important;
}

html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
)
#charades-answer-display {
    position: static !important;

    transform: none !important;

    margin: 0 auto 30px !important;

    width: auto !important;
    min-width: 420px !important;

    padding: 20px 30px !important;

    text-align: center !important;

    font-size: 26px !important;
}

html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
)
#charades-judgement-buttons {
    position: static !important;

    width: min(720px, 90%) !important;

    margin: 0 auto !important;

    display: flex !important;
    justify-content: center !important;
    gap: 18px !important;
}
/* =========================================
   بدون كلام — إظهار زر الإجابة بعد البدء
   ========================================= */

/* قبل الضغط على ابدأ */
html body
#charades-overlay
.charades-card:has(
    #charades-qr:not(.hidden)
)
#charades-show-answer {
    display: none !important;
}


/* بعد الضغط على ابدأ مباشرة */
html body
#charades-overlay
.charades-card:has(
    #charades-qr.hidden
):has(
    #charades-answer-display.hidden
)
#charades-show-answer {
    display: block !important;

    position: static !important;

    width: 220px !important;

    margin: 110px auto 0 !important;

    transform: none !important;

    z-index: 20 !important;
}


/* بعد الضغط على إظهار الإجابة */
html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
)
#charades-show-answer {
    display: none !important;
}


/* =========================================
   بدون كلام — بعد انتهاء الوقت
   ========================================= */

html body
#charades-overlay
#charades-timer.is-finished {
    display: none !important;
}

html body
#charades-overlay
#charades-timer.is-finished
#charades-team-name {
    display: none !important;
}
/* =========================================
   بدون كلام — توحيد أحجام أزرار الحكم
========================================= */

html body
#charades-overlay
#charades-judgement-buttons {
    width: auto !important;
    gap: 18px !important;
    justify-content: center !important;
}

html body
#charades-overlay
#charades-judgement-buttons
button {
    flex: 0 0 220px !important;

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    min-height: 58px !important;
    height: 58px !important;

    padding: 10px 18px !important;

    margin: 0 !important;

    font-size: 20px !important;

    white-space: nowrap !important;
}
/* =========================================
   بدون كلام — توسيط أزرار الحكم
========================================= */

html body
#charades-overlay
.charades-card:has(
    #charades-answer-display:not(.hidden)
)
#charades-judgement-buttons {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: none !important;

    width: 696px !important;
    max-width: 90% !important;

    margin: 26px auto 0 !important;

    display: flex !important;
    flex-direction: row !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 18px !important;
}


/* الثلاثة بنفس القياس */
html body
#charades-overlay
#charades-judgement-buttons
button {
    flex: 0 0 220px !important;

    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;

    height: 58px !important;
    min-height: 58px !important;

    padding: 10px 18px !important;

    margin: 0 !important;

    font-size: 20px !important;

    white-space: nowrap !important;
}
/* =========================================
   فك الشيفرة — Puzzle فقط
========================================= */

html body
#cipher-overlay
.cipher-card {
    position: relative !important;
    isolation: isolate !important;

    align-items: center !important;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(61, 141, 255, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 80%,
            rgba(144, 70, 255, .17),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #081a38,
            #0d2854 55%,
            #171346
        ) !important;

    border:
        2px solid #38a9ff !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        inset 0 0 55px rgba(55,135,255,.08)
        !important;

    overflow: hidden !important;
}


/* المحتوى فوق الزينة */
html body
#cipher-overlay
.cipher-card > *:not(
    .pg-puzzle-cipher-deco
) {
    position: relative;
    z-index: 5;
}


/* عنوان فك الشيفرة */
html body
#cipher-overlay
.cipher-header {
    flex: 0 0 auto !important;

    margin:
        18px auto 18px !important;
}

html body
#cipher-overlay
.cipher-header h2 {
    color:
        #ffffff !important;

    font-size:
        32px !important;
}


/* =========================================
   الصورة — حجم ثابت حتى لا تكبر بعد المؤقت
========================================= */

html body
#cipher-overlay
.cipher-image-container {
    flex:
        0 0 auto !important;

    width:
        min(760px, 72vw) !important;

    height:
        min(350px, 44vh) !important;

    min-height:
        0 !important;

    margin:
        8px auto 20px !important;

    padding:
        14px !important;

    border:
        2px solid rgba(
            79,
            180,
            255,
            .72
        ) !important;

    border-radius:
        22px !important;

    background:
        rgba(
            5,
            24,
            58,
            .72
        ) !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.28),
        0 0 26px rgba(45,151,255,.16)
        !important;
}

html body
#cipher-overlay
#cipher-image {
    width:
        100% !important;

    height:
        100% !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;
}


/* =========================================
   المؤقت واسم الفريق أعلى اليسار
========================================= */

html body
#cipher-overlay
#cipher-team-timer-box {
    position:
        fixed !important;

    top:
        24px !important;

    left:
        55px !important;

    right:
        auto !important;

    bottom:
        auto !important;

    width:
        170px !important;

    margin:
        0 !important;

    z-index:
        1000 !important;

    gap:
        6px !important;
}


/* لا نضع display حتى يبقى hidden يعمل طبيعي */
html body
#cipher-overlay
#cipher-team-timer-label {
    min-width:
        160px !important;

    width:
        160px !important;

    padding:
        6px 8px !important;

    box-sizing:
        border-box !important;

    font-size:
        16px !important;
}

html body
#cipher-overlay
.cipher-team-timer-circle {
    width:
        94px !important;

    height:
        94px !important;
}


/* زر إظهار الإجابة */
html body
#cipher-overlay
#cipher-show-answer:not(.hidden) {
    flex:
        0 0 auto !important;

    margin:
        10px auto 18px !important;

    transform:
        none !important;
}


/* =========================================
   الزينة المتحركة
========================================= */

html body
#cipher-overlay
.pg-puzzle-cipher-deco {
    position:
        absolute !important;

    z-index:
        1 !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    line-height:
        1 !important;

    filter:
        drop-shadow(
            0 8px 18px rgba(0,0,0,.28)
        ) !important;
}


html body
#cipher-overlay
.deco-lock {
    top: 10% !important;
    left: 11% !important;

    font-size: 105px !important;
    opacity: .13 !important;

    animation:
        cipherFloatA
        4.4s
        ease-in-out
        infinite alternate !important;
}


html body
#cipher-overlay
.deco-search {
    top: 17% !important;
    right: 10% !important;

    font-size: 92px !important;
    opacity: .13 !important;

    animation:
        cipherFloatB
        4.9s
        ease-in-out
        infinite alternate !important;
}


html body
#cipher-overlay
.deco-puzzle {
    bottom: 11% !important;
    left: 9% !important;

    font-size: 108px !important;
    opacity: .12 !important;

    animation:
        cipherFloatC
        5.2s
        ease-in-out
        infinite alternate !important;
}


html body
#cipher-overlay
.deco-key {
    bottom: 12% !important;
    right: 11% !important;

    font-size: 95px !important;
    opacity: .13 !important;

    animation:
        cipherFloatD
        4.2s
        ease-in-out
        infinite alternate !important;
}


html body
#cipher-overlay
.deco-question {
    top: 45% !important;
    left: 23% !important;

    font-size: 70px !important;
    opacity: .08 !important;

    animation:
        cipherFloatE
        3.8s
        ease-in-out
        infinite alternate !important;
}


html body
#cipher-overlay
.deco-detective {
    top: 48% !important;
    right: 22% !important;

    font-size: 72px !important;
    opacity: .08 !important;

    animation:
        cipherFloatF
        5s
        ease-in-out
        infinite alternate !important;
}


@keyframes cipherFloatA {
    from {
        transform:
            translate(0,0)
            rotate(-7deg);
    }

    to {
        transform:
            translate(20px,17px)
            rotate(7deg)
            scale(1.06);
    }
}

@keyframes cipherFloatB {
    from {
        transform:
            translate(0,0)
            rotate(7deg);
    }

    to {
        transform:
            translate(-20px,22px)
            rotate(-7deg)
            scale(1.05);
    }
}

@keyframes cipherFloatC {
    from {
        transform:
            translate(0,0)
            rotate(5deg);
    }

    to {
        transform:
            translate(23px,-17px)
            rotate(-7deg)
            scale(1.05);
    }
}

@keyframes cipherFloatD {
    from {
        transform:
            translate(0,0)
            rotate(-8deg);
    }

    to {
        transform:
            translate(-22px,-18px)
            rotate(7deg)
            scale(1.06);
    }
}

@keyframes cipherFloatE {
    from {
        transform:
            translateY(0)
            scale(.94);
    }

    to {
        transform:
            translateY(-18px)
            scale(1.08);
    }
}

@keyframes cipherFloatF {
    from {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    to {
        transform:
            translateY(18px)
            rotate(6deg)
            scale(1.05);
    }
}

/* =========================================
   فك الشيفرة — ضبط صفحة الإجابة وموازنة الفراغات
========================================= */

html body
#cipher-overlay
.cipher-card:has(
    #cipher-answer-display:not(.hidden)
) {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
}


/* العنوان */
html body
#cipher-overlay
.cipher-card:has(
    #cipher-answer-display:not(.hidden)
)
.cipher-header {
    margin:
        8px auto 10px !important;

    transform:
        translateY(16px) !important;
}


/* الصورة */
html body
#cipher-overlay
.cipher-card:has(
    #cipher-answer-display:not(.hidden)
)
.cipher-image-container {
    width:
        min(760px, 72vw) !important;

    height:
        min(300px, 38vh) !important;

    margin:
        4px auto 12px !important;

    transform:
        translateY(16px) !important;
}


/* صندوق الإجابة */
html body
#cipher-overlay
.cipher-card:has(
    #cipher-answer-display:not(.hidden)
)
#cipher-answer-display {
    margin:
        8px auto 10px !important;

    padding:
        10px 24px !important;

    transform:
        translateY(16px) !important;
}


/* أزرار الحكم */
html body
#cipher-overlay
.cipher-card:has(
    #cipher-answer-display:not(.hidden)
)
#cipher-judgement-buttons {
    margin:
        8px auto 0 !important;

    transform:
        translateY(10px) !important;
}

/* =========================================
   شوف وركّز — اسم الفريق قبل تشغيل الفيديو
========================================= */

html body
#focus-video-overlay
#focus-video-team-name {
    position: fixed !important;

    top: 24px !important;
    left: 0 !important;
    right: auto !important;

    z-index: 2000 !important;

    min-width: 150px !important;

    padding: 8px 14px !important;

    box-sizing: border-box !important;

    border: 2px solid #ff9f1c !important;
    border-radius: 0 14px 14px 0 !important;

    background: #fff4df !important;
    color: #944900 !important;

    font-family: Cairo, sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;

    text-align: center !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .28)
        !important;
}
/* =========================================
   شوف وركّز — ترتيب صفحة الإجابة
========================================= */

html body
#focus-question-overlay
.focus-question-card:has(
    #focus-answer-display:not(.hidden)
) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 16px !important;

    padding:
        24px 30px 26px !important;
}


/* العنوان */
html body
#focus-question-overlay
.focus-question-card:has(
    #focus-answer-display:not(.hidden)
)
.focus-question-header {
    margin:
        0 auto 8px !important;
}


/* صندوق الإجابة */
html body
#focus-question-overlay
.focus-question-card:has(
    #focus-answer-display:not(.hidden)
)
#focus-answer-display {
    width:
        min(620px, 90%) !important;

    margin:
        6px auto !important;

    padding:
        14px 22px !important;
}


/* أزرار الحكم الثلاثة */
html body
#focus-question-overlay
#focus-judgement-buttons:not(.hidden) {
    width:
        min(720px, 92%) !important;

    margin:
        6px auto !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3, 1fr) !important;

    gap:
        16px !important;
}


/* حجم الأزرار */
html body
#focus-question-overlay
#focus-judgement-buttons
button {
    min-height:
        54px !important;

    height:
        54px !important;

    padding:
        8px 16px !important;

    font-size:
        18px !important;

    border-radius:
        16px !important;
}


/* زر لا أحد بنفس حجم الباقي */
html body
#focus-question-overlay
#focus-no-winner-button {
    grid-column:
        auto !important;

    width:
        auto !important;

    min-height:
        54px !important;

    height:
        54px !important;
}


/* زر إعادة المقطع */
html body
#focus-question-overlay
#focus-replay-button:not(.hidden) {
    min-width:
        230px !important;

    min-height:
        48px !important;

    height:
        48px !important;

    margin:
        6px auto 0 !important;

    padding:
        8px 18px !important;
}
/* =========================================
   اسمع وركّز — اسم الفريق قبل تشغيل المقطع
========================================= */

html body
#listen-focus-overlay
#listen-focus-start-team-name {
    position: fixed !important;

    top: 24px !important;
    left: 18px !important;
    right: auto !important;

    z-index: 2000 !important;

    min-width: 150px !important;

    padding: 8px 14px !important;

    box-sizing: border-box !important;

    border:
        2px solid #ff9f1c !important;

    border-radius:
        14px !important;

    background:
        #fff4df !important;

    color:
        #944900 !important;

    font-family:
        Cairo,
        sans-serif !important;

    font-size:
        18px !important;

    font-weight:
        900 !important;

    text-align:
        center !important;

    box-shadow:
        0 6px 18px
        rgba(0,0,0,.28) !important;
}
/* =========================================
   جاي بالغلط — المؤقت واسم الفريق أعلى اليسار
========================================= */

html body
#odd-one-out-overlay
#odd-one-out-timer-box {
    position: fixed !important;

    top: 24px !important;
    left: 18px !important;
    right: auto !important;
    bottom: auto !important;

    width: 160px !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    z-index: 2000 !important;
}

html body
#odd-one-out-overlay
.odd-one-out-timer-circle {
    order: 1 !important;

    width: 94px !important;
    height: 94px !important;

    margin: 0 auto !important;
}

html body
#odd-one-out-overlay
#odd-one-out-timer-label {
    order: 2 !important;

    width: 150px !important;
    min-width: 150px !important;

    margin: 0 auto !important;
    padding: 6px 8px !important;

    box-sizing: border-box !important;

    font-size: 16px !important;
    text-align: center !important;
}
/* =========================================
   جاي بالغلط — تنظيف صفحة الإجابة
========================================= */

/* إخفاء المؤقت واسم الفريق في صفحة الإجابة فقط */
html body
#odd-one-out-overlay
.odd-one-out-card:has(
    #odd-one-out-answer:not(.hidden)
)
#odd-one-out-timer-box {
    display: none !important;
}

/* إزالة ظل أزرار التحكيم في صفحة الإجابة فقط */
html body
#odd-one-out-overlay
.odd-one-out-card:has(
    #odd-one-out-answer:not(.hidden)
)
#odd-one-out-result-buttons
button {
    box-shadow: none !important;
}
/* لا ترمش - اسم الفريق قبل بدء التحدي */
#dont-blink-start-team-name {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 100010;

    width: auto;
    min-width: 0;

    padding: 8px 14px;
    border-radius: 12px;

    font-size: 17px;
    font-weight: 900;
    line-height: 1;

    color: white;
    background: rgba(3, 12, 35, 0.90);

    border:
        2px solid
        rgba(255, 255, 255, 0.32);
}

/* لا ترمش - المؤقت أولًا واسم الفريق تحته */
#dont-blink-timer-area {
    flex-direction: column !important;
    gap: 6px !important;
}

#dont-blink-timer {
    order: 1 !important;
}

#dont-blink-team-name {
    position: static !important;

    top: auto !important;
    left: auto !important;

    order: 2 !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}
.pg-usd-price {
    font-size: 0.72em;
    font-weight: 700;
}