/**
 * Eduplayify Game Template: word_scramble (ترتيب أحرف الكلمة)
 * تصميم تفاعلي وجذاب يدعم اللمس، النقر، والسحب والإفلات مع ألوان مرحة ومتباينة
 * يدعم اتجاه كتابة الكلمة المستقل تماماً عن لغة واجهة الموقع (LTR / RTL)
 */

/* الحاوية الرئيسية للقالب */
.ws-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 14px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

/* صورة السؤال التوضيحية (إن وجدت) */
.ws-image-box {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}
.ws-image {
    max-height: 160px;
    max-height: clamp(120px, 22vh, 220px);
    max-width: 92%;
    border-radius: 18px;
    object-fit: contain;
    background: #ffffff;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    border: 2px solid rgba(226, 232, 240, 0.9);
    transition: transform 0.25s ease;
}
.ws-image:hover {
    transform: scale(1.02);
}

/* تلميح أو وصف السؤال */
.ws-description-box {
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
    border: 1px solid #cbd5e1;
    padding: 8px 20px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.ws-description {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-size: clamp(0.95rem, 2.5vw, 1.18rem);
    font-weight: 700;
}

/* شريط التوجيه وشارة الاتجاه */
.ws-instruction-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ws-instruction {
    font-size: 0.9rem;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    color: #475569;
    font-weight: 700;
}
.ws-dir-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
}
.ws-dir-badge.ws-dir-ltr {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.ws-dir-badge.ws-dir-rtl {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

/* حاوية خانات الإجابة المستهدفة (Answer Tray) */
.ws-slots-tray {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    gap: clamp(8px, 1.8vw, 14px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 2px dashed #94a3b8;
    border-radius: 22px;
    padding: 16px 20px;
    padding: clamp(14px, 2.8vw, 22px) clamp(16px, 3.2vw, 30px);
    margin: 0 auto 22px;
    min-height: 84px;
    min-height: clamp(75px, 12vh, 98px);
    max-width: 96%;
    box-sizing: border-box;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* فرض الاتجاه الصارم للكلمة */
.ws-slots-tray[dir="ltr"] {
    direction: ltr !important;
}
.ws-slots-tray[dir="rtl"] {
    direction: rtl !important;
}

.ws-slots-tray.drop-hover {
    border-color: #6366f1;
    background: #f5f3ff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18), inset 0 2px 8px rgba(99, 102, 241, 0.1);
    transform: scale(1.01);
}

.ws-slots-tray.correct {
    border-color: #10b981;
    border-style: solid;
    background: #ecfdf5;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.35);
}

.ws-slots-tray.shake {
    animation: wsShake 0.48s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    border-color: #ef4444;
}

/* كل خانة من خانات الكلمة (Slot) — المقاسات الثابتة أولًا كي لا تنهار على متصفح بلا clamp */
.ws-slot {
    width: 56px;
    width: clamp(48px, 11vw, 68px);
    height: 62px;
    height: clamp(54px, 12vw, 76px);
    min-width: 48px;
    min-height: 54px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.ws-slot.is-over {
    border-color: #6366f1;
    background: #e0e7ff;
    transform: scale(1.08);
}

.ws-slot.is-filled {
    border-style: solid;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* النقطة الدليلية داخل الخانة الفارغة */
.ws-slot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    pointer-events: none;
}

/* بطاقة / بلاطة الحرف (Letter Tile) — fallback ثابت قبل clamp لنفس السبب */
.ws-letter {
    width: 56px;
    width: clamp(48px, 11vw, 68px);
    height: 62px;
    height: clamp(54px, 12vw, 76px);
    min-width: 48px;
    min-height: 54px;
    border-radius: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-size: clamp(1.5rem, 5vw, 2.3rem);
    font-weight: 900;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.15s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.15s ease, opacity 0.2s ease;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* التمييز الطباعي بحسب اتجاه الكلمة */
.ws-slots-tray[dir="ltr"] .ws-letter,
.ws-pool[dir="ltr"] .ws-letter {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.5px;
}
.ws-slots-tray[dir="rtl"] .ws-letter,
.ws-pool[dir="rtl"] .ws-letter {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
}

/* تأثير اللمعان الجمالي أعلى الحرف */
.ws-letter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.06) 100%);
    border-radius: 14px 14px 0 0;
    pointer-events: none;
}

/* تأثير عند المرور بالفأرة */
.ws-letter:hover:not(:disabled):not(.is-used):not(.is-dragging) {
    transform: translateY(-4px) scale(1.05);
}

/* تأثير عند الضغط */
.ws-letter:active:not(:disabled):not(.is-dragging) {
    transform: translateY(2px) scale(0.97);
}

/* الحرف أثناء السحب */
.ws-letter.is-dragging {
    position: relative !important;
    z-index: 9999 !important;
    cursor: grabbing !important;
    opacity: 0.95 !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.16) !important;
    transition: none !important;
    -webkit-transition: none !important;
    will-change: transform;
}

/* الحرف الموضوع داخل خانة الإجابة */
.ws-letter.is-placed {
    cursor: pointer;
    animation: wsPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.ws-letter.is-placed:hover:not(.is-dragging) {
    transform: translateY(-2px) scale(1.03);
}

/* الحرف المستخدم من الحوض */
.ws-letter.is-used {
    opacity: 0.18;
    cursor: default;
    pointer-events: none;
    transform: scale(0.9);
    box-shadow: none !important;
}

/* حوض الحروف المبعثرة (Letters Pool) */
.ws-pool-wrap {
    margin-bottom: 24px;
    width: 100%;
}
.ws-pool {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    gap: clamp(8px, 2vw, 14px);
    padding: 8px;
}

/* فرض الاتجاه الصارم لحوض الحروف */
.ws-pool[dir="ltr"] {
    direction: ltr !important;
}
.ws-pool[dir="rtl"] {
    direction: rtl !important;
}

/* شريط أزرار التحكم والعمليات (Actions Bar) */
.ws-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* زر التحقق من الإجابة */
.ws-btn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 9999px;
    border: none;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ws-btn-check:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
}
.ws-btn-check:active:not(:disabled) {
    transform: translateY(1px);
}
.ws-btn-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    background: #94a3b8;
}

/* تأثير نبض تحفيزي عندما تكتمل جميع الخانات */
.ws-btn-check.is-ready:not(:disabled) {
    animation: wsPulseReady 1.5s infinite;
}

@keyframes wsPulseReady {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 22px rgba(79, 70, 229, 0.65);
        transform: scale(1.04);
    }
}

/* أزرار المسح والتراجع */
.ws-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.94rem;
    font-weight: 700;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.ws-btn-secondary:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}
.ws-btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* رسائل التقييم والتغذية الراجعة (Feedback) */
.ws-feedback {
    min-height: 34px;
    font-size: 1.18rem;
    font-weight: 800;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}
.ws-feedback.correct {
    color: #059669;
}
.ws-feedback.incorrect {
    color: #dc2626;
}

/* أنيميشن الاهتزاز عند الإجابة الخاطئة */
@keyframes wsShake {
    10%, 90% { transform: translate3d(-3px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* أنيميشن الظهور السلس للبلاطة */
@keyframes wsPopIn {
    0% {
        transform: scale(0.65);
        opacity: 0;
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* مصيدة غير بديهية: flex gap غير مدعوم في Safari<14.1/IE — الهوامش أدناه
   تعمل بديلًا فقط عند غياب gap، والحديث يتجاهلها تمامًا */
@supports not (gap: 8px) {
    .ws-slots-tray > *, .ws-pool > *, .ws-actions > * { margin: 4px 5px; }
}