/* ================================
   CARDS
================================ */

.grid{

    display:grid;

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

    gap:18px;

}


.card{

    min-height:225px;

    padding:22px;

    border-radius:20px;

    background:white;

    border:
    1px solid var(--line);

    transition:.15s;

}


.card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 14px 30px
    rgba(38,50,85,.09);

}


.card:nth-child(6n+1){
    border-top:6px solid var(--blue);
}

.card:nth-child(6n+2){
    border-top:6px solid var(--green);
}

.card:nth-child(6n+3){
    border-top:6px solid var(--yellow);
}

.card:nth-child(6n+4){
    border-top:6px solid var(--pink);
}

.card:nth-child(6n+5){
    border-top:6px solid var(--orange);
}

.card:nth-child(6n+6){
    border-top:6px solid var(--purple);
}


.card-icon{

    width:51px;
    height:51px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    font-size:19px;

    background:
    var(--purple-light);

    color:
    var(--purple);

}


.card h3{

    margin:
    17px 0 8px;

}


.card p{

    min-height:52px;

    color:#73798c;

    font-size:14px;

    line-height:1.55;

}


.card-bottom{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    gap:10px;

    margin-top:18px;

}


.open-button{

    border:
    1px solid var(--line);

    background:#f8f9fc;

    border-radius:11px;

    padding:10px 14px;

    font-weight:bold;

}


.exercise-count{

    padding:7px 9px;

    border-radius:9px;

    background:#f4f6fa;

    color:#8d93a6;

    font-size:12px;

}


/* ================================
   EXERCISE
================================ */

.exercise{

    max-width:940px;

    margin:auto;

}


.back{

    border:
    1px solid var(--line);

    background:white;

    border-radius:11px;

    padding:10px 15px;

    margin-bottom:15px;

    font-weight:bold;

}


.exercise-card{

    padding:32px;

    background:white;

    border:
    1px solid var(--line);

    border-radius:25px;

    box-shadow:
    0 14px 38px
    rgba(39,56,98,.07);

}


.exercise-meta{

    display:flex;

    justify-content:
    space-between;

    color:#83899b;

    font-size:13px;

    margin-bottom:10px;

}


/* ================================
   PROGRESS
================================ */

.progress{

    height:12px;

    margin-bottom:28px;

    overflow:hidden;

    border-radius:999px;

    background:#edf1f8;

}


.progress-bar{

    height:100%;

    border-radius:999px;

    transition:
    width .3s ease;

    background:

    linear-gradient(
        90deg,
        #5fbff4,
        #6c63e8,
        #ed78ad
    );

}


.instruction{

    text-align:center;

    color:#73798a;

    font-size:18px;

    line-height:1.6;

}


.big-word{

    margin:
    20px 0 8px;

    text-align:center;

    font-size:45px;

    font-weight:bold;

    letter-spacing:3px;

    color:#30345f;

}


.translation{

    text-align:center;

    font-size:21px;

    color:#73798c;

}


.word-category{

    width:max-content;

    max-width:100%;

    margin:
    13px auto;

    padding:
    7px 11px;

    border-radius:999px;

    font-size:12px;

    font-weight:bold;

    color:#6f5d00;

    background:#fff5cf;

}


/* ================================
   SAFE VISUAL
================================ */

.safe-visual{

    max-width:300px;

    margin:
    15px auto;

    padding:14px;

    border-radius:18px;

    border:
    2px solid #e2e8f2;

    background:

    linear-gradient(
        145deg,
        #fbfdff,
        #f5f1ff
    );

    text-align:center;

}


.safe-emoji{

    font-size:70px;

    line-height:1;

    min-height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.safe-label{

    margin-top:8px;

    color:#6f7488;

    font-size:13px;

}


.visual-controls{

    display:flex;

    justify-content:center;

    gap:9px;

    flex-wrap:wrap;

    margin-top:12px;

}


/* ================================
   INPUT
================================ */

.answer-input{

    display:block;

    width:100%;

    max-width:530px;

    margin:
    25px auto 0;

    padding:16px;

    border:
    2px solid #dfe3ed;

    border-radius:15px;

    outline:none;

    font-size:21px;

}


.answer-input:focus{

    border-color:
    var(--purple);

    box-shadow:
    0 0 0 4px
    var(--purple-light);

}


/* ================================
   BUTTONS
================================ */

.actions{

    margin-top:18px;

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}


.primary{

    border:0;

    border-radius:12px;

    padding:13px 20px;

    color:white;

    font-weight:bold;

    background:

    linear-gradient(
        135deg,
        #675be5,
        #8175ed
    );

}


.secondary{

    border:
    1px solid var(--line);

    background:white;

    border-radius:12px;

    padding:13px 20px;

    font-weight:bold;

}


.listen-button{

    border:
    2px solid #98d5f6;

    background:#e8f7ff;

    color:#176d9f;

    border-radius:12px;

    padding:13px 20px;

    font-weight:bold;

}


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

.feedback{

    text-align:center;

    min-height:25px;

    margin-top:19px;

    font-weight:bold;

}


.feedback.correct{

    padding:13px;

    border-radius:13px;

    background:#e8faef;

    color:#218456;

}


.feedback.wrong{

    padding:13px;

    border-radius:13px;

    background:#fff0f1;

    color:#bd4350;

}


/* ================================
   NAVIGATION
================================ */

.exercise-navigation{

    margin-top:30px;

    padding-top:22px;

    border-top:
    1px solid var(--line);

    display:grid;

    grid-template-columns:
    1fr auto 1fr;

    align-items:center;

    gap:15px;

}


.previous-button,
.next-button{

    border:0;

    border-radius:13px;

    padding:13px 17px;

    font-weight:bold;

}


.previous-button{

    justify-self:start;

    background:#edf6ff;

    color:#2c6d98;

}


.next-button{

    justify-self:end;

    background:#eeeaff;

    color:#5145bc;

}


.page-number{

    color:#5e6579;

    font-weight:bold;

}


/* ================================
   LETTERS
================================ */

.letters,
.symbols{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:11px;

    margin:
    28px 0;

}


.letter{

    width:59px;
    height:59px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
    2px solid var(--line);

    border-radius:14px;

    font-size:25px;

    font-weight:bold;

}


.letter:nth-child(5n+1){
    background:#e6f6ff;
}

.letter:nth-child(5n+2){
    background:#ecfaef;
}

.letter:nth-child(5n+3){
    background:#fff5d9;
}

.letter:nth-child(5n+4){
    background:#ffeaf3;
}

.letter:nth-child(5n+5){
    background:#f0ecff;
}


/* ================================
   OPTIONS
================================ */

.options{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:13px;

    max-width:680px;

    margin:
    26px auto 0;

}


.option{

    min-height:58px;

    border:
    2px solid #e1e5ed;

    background:white;

    border-radius:15px;

    padding:17px;

    font-size:18px;

    font-weight:bold;

}


.option:hover{

    background:#f5f2ff;

    border-color:#9187e9;

}


.option.correct-option{

    border-color:#67bd8b;

    background:#e8faef;

}


.option.wrong-option{

    border-color:#df929a;

    background:#fff0f1;

}


.symbol{

    width:64px;
    height:64px;

    border:
    2px solid #dfe4ed;

    border-radius:15px;

    background:white;

    font-size:29px;

}

.hero-visual p,
.hero-visual strong{color:#ffffff;text-shadow:0 1px 2px rgba(20,20,70,.28);}

.difficulty-box{margin:22px 0 4px;}
.difficulty-box strong{display:block;margin-bottom:9px;color:#35376a;}
.difficulty-options{display:flex;gap:8px;flex-wrap:wrap;}
.difficulty-button{border:2px solid #dce3ef;background:#fff;color:#4f5870;border-radius:12px;padding:10px 14px;font-weight:bold;}
.difficulty-button.active{border-color:#7065e8;background:#eeeaff;color:#4439ae;box-shadow:0 0 0 3px rgba(112,101,232,.10);}

.phonetic{margin:8px auto 2px;color:#444d65;font-size:18px;font-weight:bold;}
.results-grid{max-width:580px;margin:22px auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;}
.result-item{padding:15px;border:1px solid var(--line);border-radius:14px;background:#f8fbff;}
.result-item strong{display:block;font-size:25px;color:#4f45bd;}