/* =======================================================
   JUMBLED SENTENCES
======================================================= */

.jumbled-header-card,
.jumbled-drop-zone {

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #172554 40%,
            #0f172a 100%
        );

    border: 1px solid rgba(96,165,250,.25);

    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 18px rgba(37,99,235,.12),
        0 4px 18px rgba(0,0,0,.35);

    border-radius: 20px;
}

.jumbled-header-card{
    padding:1rem;
    margin-bottom:.75rem;
}

.jumbled-badge{

    display:inline-block;

    padding:.25rem .75rem;

    border-radius:999px;

    background:rgba(59,130,246,.15);

    border:1px solid rgba(96,165,250,.25);

    color:#7dd3fc;

    font-size:.65rem;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:.65rem;
}

.jumbled-title{

    font-size:1.25rem;

    font-weight:700;

    color:white;

    line-height:1.2;
}

.jumbled-subtitle{

    margin-top:.35rem;

    color:#94a3b8;

    font-size:.82rem;
}

.jumbled-progress{

    color:#93c5fd;

    font-size:.8rem;

    font-weight:600;
}

.jumbled-hint-btn{

    display:flex;

    align-items:center;

    gap:.5rem;

    padding:.55rem .85rem;

    border-radius:999px;

    background:rgba(245,158,11,.15);

    border:1px solid rgba(245,158,11,.3);

    color:#fbbf24;

    font-weight:700;

    transition:.25s;
}

.jumbled-hint-btn:hover{
    transform:translateY(-1px);
}

.jumbled-timer-container{

    width:100%;

    height:10px;

    overflow:hidden;

    border-radius:999px;

    margin-bottom:1rem;

    background:#1f2937;
}

#jumbled-timer-bar{

    height:100%;

    border-radius:999px;
}

.jumbled-drop-zone{

    min-height:120px;

    padding:1rem;

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

    align-items:flex-start;

    justify-content:center;

    margin-bottom:1rem;
}

.jumbled-word-bank{

    width:100%;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:.8rem;
}

.jumbled-btn-primary,
.jumbled-btn-success{

    border:none;

    border-radius:14px;

    padding:.9rem 1.4rem;

    font-weight:700;

    color:white;

    transition:.25s;
}

.jumbled-btn-primary{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );
}

.jumbled-btn-success{

    background:
        linear-gradient(
            135deg,
            #0891b2,
            #0e7490
        );
}

.jumbled-btn-primary:hover,
.jumbled-btn-success:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 18px rgba(59,130,246,.25);
}

/* MOBILE */

@media (max-width:640px){

    .jumbled-header-card{
        padding:.85rem;
    }

    .jumbled-title{
        font-size:1rem;
    }

    .jumbled-subtitle{
        font-size:.75rem;
    }

    .jumbled-drop-zone{
        min-height:100px;
        padding:.75rem;
    }

    .jumbled-btn-primary,
    .jumbled-btn-success{

        flex:1;

        padding:.8rem 1rem;

        font-size:.95rem;
    }
}


.word-draggable{

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

    min-height:44px;

    padding:10px 16px;

    border-radius:14px;

    cursor:grab;

    user-select:none;

    color:white;

    font-size:.95rem;
    font-weight:600;

    background:
        linear-gradient(
            135deg,
            #111827 0%,
            #172554 40%,
            #0f172a 100%
        );

    border:1px solid rgba(96,165,250,.25);

    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 18px rgba(37,99,235,.12),
        0 4px 18px rgba(0,0,0,.35);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}

.word-draggable:hover{

    transform:translateY(-2px);

    border-color:rgba(96,165,250,.45);

    box-shadow:
        0 0 22px rgba(37,99,235,.20),
        0 6px 20px rgba(0,0,0,.4);
}

.word-draggable:active{

    cursor:grabbing;

    transform:scale(1.04);
}

.word-draggable.dragging{

    opacity:.45;

    transform:scale(.95);
}

.word-draggable.moving{

    opacity:0 !important;

    transition:none !important;
}

.word-draggable.correct{

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #164e63
        );

    border-color:rgba(34,211,238,.45);

    box-shadow:
        0 0 20px rgba(34,211,238,.25);
}

.word-draggable.hint-highlight{

    border-color:#fbbf24;

    box-shadow:
        0 0 22px rgba(251,191,36,.45);

    transform:scale(1.05);
}



.word-translation{

    display:block;

    margin-top:4px;

    font-size:.7rem;

    color:#7dd3fc;

    font-style:italic;

    opacity:.9;
}



@media (max-width:640px){

    .word-draggable{

        padding:8px 12px;

        font-size:.85rem;

        min-height:40px;
    }

    .word-translation{

        font-size:.65rem;
    }
}


/* ==========================================
   JUMBLED FEEDBACK
========================================== */

.jumbled-feedback-success{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.5rem;

    width:100%;

    animation:fadeIn .3s ease;
}

.jumbled-feedback-badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.45rem 1rem;

    border-radius:999px;

    background:rgba(34,211,238,.10);

    border:1px solid rgba(34,211,238,.25);

    color:#67e8f9;

    font-size:.9rem;

    font-weight:700;

    text-align:center;
}

.jumbled-feedback-translation{

    max-width:100%;

    padding:.55rem .9rem;

    border-radius:12px;

    background:rgba(15,23,42,.75);

    border:1px solid rgba(148,163,184,.15);

    color:#cbd5e1;

    font-size:.9rem;

    font-style:italic;

    text-align:center;

    word-break:break-word;
}

@media (max-width:640px){

    .jumbled-feedback-badge{

        font-size:.8rem;

        padding:.4rem .85rem;
    }

    .jumbled-feedback-translation{

        font-size:.8rem;
    }
}

/* Jumbled sentence progress */
#jumbled-progress, #fill-blanks-progress, #quiz-progress, #ball-shot-progress {
  color: var(--electric) !important;
}