.reading-page{

    max-width:72rem;

    margin:auto;

    padding:3rem 2rem 6rem;
}

.reading-title{

    margin-bottom:1rem;
}

.reading-controls{

    display:flex;

    gap:1rem;

    margin-bottom:2rem;
}

.tts-btn{

    width:4rem;

    height:4rem;

    border:none;

    cursor:pointer;

    border-radius:
    1.5rem 1.8rem 1.4rem 1.9rem;

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );

    color:#222;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0.5rem 0.6rem 0
    rgba(0,0,0,0.25);
}

.tts-btn svg{

    width:1.4rem;

    height:1.4rem;
}

.reading-card{

    position:relative;

    background:
    rgba(255,255,255,0.05);

    border:
    0.12rem solid rgba(255,255,255,0.08);

    border-radius:
    2.5rem 2rem 2.8rem 2rem;

    padding:
    3rem;

    overflow:hidden;

    backdrop-filter:blur(0.5rem);

    box-shadow:
    1rem 1rem 0
    rgba(0,0,0,0.2);
}

.reading-top{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:0.7rem;

    background:
    linear-gradient(
        90deg,
        #ff5f6d,
        #ffc371
    );
}
.learn-text{

    margin:0;

    padding-bottom:0.2rem;

    font-size:0.76rem;

    font-weight:700;

    letter-spacing:0.28em;

    text-transform:uppercase;

    color:var(--orange);
}


.reading-text{

    line-height:2.2;

    font-size:1.15rem;

    color:white;
}

.word{

    cursor:pointer;

    transition:
    0.15s ease;

    border-radius:0.4rem;

    padding:0.1rem 0.2rem;

    border-bottom:
    0.12rem dotted
    rgba(255,255,255,0.45);
}

.word:hover{

    background:
    rgba(255,255,255,0.08);

    color:#ffb27d;

    border-bottom-color:
    #ffb27d;
}
.popup-speak{

    width:3.4rem;

    height:3.4rem;

    border:none;

    border-radius:
    1rem 1.2rem 1rem 1.3rem;

    cursor:pointer;

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0.35rem 0.4rem 0
    rgba(0,0,0,0.22);

    padding:0;
}
.popup-speak svg{

    width:1.2rem;

    height:1.2rem;

    stroke-width:2.4;

    transform:
    translateX(0.02rem);
}
.hidden{

    display:none;
}

.popup-polish{

    font-size:1.4rem;

    font-weight:700;

    color:white;

    margin-bottom:0.4rem;
}

.popup-english{

    color:
    rgba(255,255,255,0.8);

    margin-bottom:1rem;
}

.popup-speak{

    width:3rem;

    height:3rem;

    border:none;

    border-radius:1rem;

    cursor:pointer;

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );
}

.word-popup{

    position:fixed;

    width:18rem;

    padding:1.4rem;

    border-radius:
    1.8rem;

    background:
    rgba(33,35,61,0.96);

    border:
    0.12rem solid rgba(255,255,255,0.08);

    box-shadow:
    0.8rem 0.8rem 0
    rgba(0,0,0,0.25);

    z-index:1000;

    backdrop-filter:
    blur(1rem);
}
.questions-container{

    margin-top:3rem;

    display:flex;

    flex-direction:column;

    gap:1.5rem;
}

.question-card{

    background:
    rgba(255,255,255,0.05);

    border-radius:
    2rem;

    padding:2rem;
}

.question-title{

    font-size:1.1rem;

    color:white;

    margin-bottom:1rem;
}

.question-options{

    display:flex;

    flex-direction:column;

    gap:1rem;
}

.option-btn{

    border:none;

    cursor:pointer;

    text-align:left;

    padding:1rem 1.2rem;

    border-radius:
    1.2rem;

    background:
    rgba(255,255,255,0.08);

    color:white;
}
.topbar{

    display:grid;

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

    align-items:center;

    margin-bottom:2.5rem;
}

.reading-title{

    text-align:center;

    margin:0;
}

.reading-actions{

    display:flex;

    justify-content:flex-end;
}

.back-btn{

    justify-self:start;

    display:inline-flex;

    align-items:center;

    gap:0.55rem;
}

.option-btn{

    border:none;

    cursor:pointer;

    text-align:left;

    padding:1.15rem 1.3rem;

    border-radius:
    1.3rem 1.5rem 1.3rem 1.6rem;

    background:
    rgba(255,255,255,0.08);

    color:white;

    font-size:1rem;

    font-weight:600;

    transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;

    border:
    0.12rem solid
    rgba(255,255,255,0.08);

    box-shadow:
    0.45rem 0.5rem 0
    rgba(0,0,0,0.22);

    position:relative;

    overflow:hidden;
}
.option-btn:hover{

    transform:
    translateY(-0.12rem);

    background:
    rgba(255,255,255,0.12);
}
.option-btn:active{

    transform:
    translateY(0.12rem);

    box-shadow:
    0.2rem 0.25rem 0
    rgba(0,0,0,0.18);
}
.option-btn.correct{

    background:
    rgba(76,175,80,0.22);

    border-color:
    rgba(126,255,145,0.4);
}
.option-btn.wrong{

    background:
    rgba(255,82,82,0.2);

    border-color:
    rgba(255,120,120,0.35);
}

.reading-footer{

    display:flex;

    justify-content:center;

    margin-top:3rem;
}

.next-btn{

    border:none;

    cursor:pointer;

    padding:
    1.2rem 2rem;

    border-radius:
    1.4rem 1.8rem 1.3rem 1.9rem;

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );

    color:#1d1d1d;

    font-size:1rem;

    font-weight:700;

    box-shadow:
    0.5rem 0.6rem 0
    rgba(0,0,0,0.25);

    transition:
    transform 0.15s ease;
}

.next-btn:hover{

    transform:
    translateY(-0.12rem);
}

.input-question{

    display:flex;

    gap:1rem;

    margin-top:1rem;

    flex-wrap:wrap;
}

.reading-input{

    flex:1;

    min-width:14rem;

    border:none;

    outline:none;

    padding:1rem 1.2rem;

    border-radius:
    1.2rem;

    background:
    rgba(255,255,255,0.08);

    color:white;

    font-size:1rem;

    border:
    0.12rem solid
    rgba(255,255,255,0.08);
}

.submit-input-btn{

    border:none;

    cursor:pointer;

    padding:
    1rem 1.4rem;

    border-radius:
    1.2rem;

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );

    font-weight:700;

    color:#1d1d1d;
}

.reading-input.correct{

    border-color:
    rgba(126,255,145,0.5);

    background:
    rgba(76,175,80,0.18);
}

.reading-input.wrong{

    border-color:
    rgba(255,120,120,0.4);

    background:
    rgba(255,82,82,0.18);
}

.close-popup-btn{

    position:absolute;

    top:0.9rem;

    right:0.9rem;

    width:2rem;

    height:2rem;

    border:none;

    background:transparent;

    color:rgba(255,255,255,0.6);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:0.6rem;

    transition:
    0.15s ease;
}

.close-popup-btn:hover{

    background:
    rgba(255,255,255,0.08);

    color:white;
}

.close-popup-btn svg{

    width:1rem;

    height:1rem;
}

.popup-type{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
    0.35rem 0.7rem;

    border-radius:
    999rem;

    background:
    rgba(255,255,255,0.08);

    color:
    rgba(255,255,255,0.7);

    font-size:0.78rem;

    font-weight:700;

    letter-spacing:0.03em;

    margin-bottom:1rem;
}

.reading-footer{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:1.2rem;

    margin-top:3rem;
}

.reading-score{

    padding:
    0.7rem 1.2rem;

    border-radius:
    999rem;

    background:
    rgba(255,255,255,0.08);

    border:
    0.12rem solid
    rgba(255,255,255,0.08);

    color:white;

    font-weight:700;

    font-size:0.95rem;
}

.story-navigation{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:0.8rem;

    margin-bottom:0.5rem;
}

.story-nav-btn{

    width:2.8rem;

    height:2.8rem;

    border:none;

    cursor:pointer;

    border-radius:
    1rem 1.2rem 1rem 1.3rem;

    background:
    rgba(255,255,255,0.08);

    color:white;

    font-weight:700;

    transition:
    0.15s ease;

    border:
    0.12rem solid
    rgba(255,255,255,0.08);
}

.story-nav-btn:hover{

    transform:
    translateY(-0.1rem);

    background:
    rgba(255,255,255,0.12);
}

.story-nav-btn.active{

    background:
    linear-gradient(
        145deg,
        #ffb27d,
        #ff9b7d
    );

    color:#1d1d1d;
}