.books-page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 auto;
    max-width: 760px;
    overflow: hidden;
    padding: 8px 0 16px;
    width: 100%;
}

.books-category {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.books-category-head,
.books-intro,
.books-empty-card {
    box-sizing: border-box;
    margin: 0 8px;
    padding: 10px;
}

.books-category-head {
    background: rgb(220 244 255 / 78%);
    border: 1px solid rgb(119 199 255 / 58%);
    border-radius: 10px;
}

.books-category-head h2,
.books-intro h1 {
    color: #c12ada;
    font-size: clamp(20px, 4.8vw, 26px);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    text-align: center;
}

.books-category-head p,
.books-intro p {
    color: #36576b;
    font-size: clamp(12px, 3.5vw, 15px);
    font-weight: 700;
    line-height: 1.3;
    margin: 8px 0 0;
}

.books-row-shell {
    margin: 0 8px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.books-row {
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 0 10px;
    scroll-padding-left: 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.books-row::-webkit-scrollbar {
    height: 8px;
}

.books-row::-webkit-scrollbar-thumb {
    background: rgb(23 78 166 / 30%);
    border-radius: 999px;
}

.books-row-control {
    align-items: center;
    background: rgb(220 244 255 / 92%);
    border: 1px solid rgb(119 199 255 / 74%);
    border-radius: 999px;
    box-shadow: 0 2px 5px rgb(0 75 110 / 16%);
    color: #078fc7;
    cursor: pointer;
    display: none;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;
    height: 42px;
    justify-content: center;
    padding: 0 0 4px;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 42px;
    z-index: 2;
}

.books-row-control--prev {
    left: 4px;
}

.books-row-control--next {
    right: 4px;
}

.books-row-control:disabled {
    cursor: default;
    opacity: 0.35;
}

.book-card {
    background: rgb(255 255 255 / 72%);
    border: 1px solid rgb(182 213 255 / 72%);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
    box-sizing: border-box;
    color: inherit;
    display: flex;
    flex: 0 0 142px;
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
}

.book-card-cover {
    aspect-ratio: 1 / 1.28;
    background: rgb(255 255 255 / 72%);
    display: block;
    overflow: hidden;
    position: relative;
}

.book-card-cover img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.book-card-progress {
    background: rgb(255 246 218 / 94%);
    border: 1px solid rgb(255 255 255 / 80%);
    border-radius: 8px;
    color: #a088d8;
    font-size: 11px;
    font-weight: 900;
    left: 6px;
    line-height: 1;
    padding: 6px 7px 5px;
    position: absolute;
    top: 6px;
}

.book-card-body {
    background: rgb(248 236 228 / 86%);
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.book-card-title {
    color: #151515;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.18;
}

.book-card-level {
    color: #8b92a0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
}

.books-intro {
    background: rgb(255 244 191 / 76%);
    border: 1px solid rgb(182 213 255 / 70%);
    border-radius: 10px;
}

.book-reader {
    background: #fff8ff;
    box-sizing: border-box;
    min-height: calc(100vh - 65px);
    min-height: calc(100svh - 65px);
    overflow: hidden;
    padding: 0 0 92px;
    position: relative;
}

.exercise-content:has(.book-reader) {
    background: #fff8ff;
}

.book-reader-page-pill {
    align-items: center;
    background: #e0ad71;
    border: 2px solid rgb(255 255 255 / 72%);
    border-radius: 16px;
    box-shadow: 0 2px 5px rgb(0 75 110 / 18%);
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 900;
    height: 38px;
    justify-content: center;
    left: calc(50% - min(600px, 50vw) + 20px);
    margin: 0;
    min-width: 78px;
    padding: 0 12px;
    position: fixed;
    top: 14px;
    z-index: 20;
}

.book-reader-text {
    box-sizing: border-box;
    height: calc(100vh - 157px);
    height: calc(100svh - 157px);
    overflow-y: auto;
    padding: 8px 8px;
    scroll-behavior: smooth;
}

.book-reader-empty {
    background: rgb(238 250 255 / 86%);
    border: 1px solid rgb(182 213 255 / 78%);
    border-radius: 10px;
    color: #36576b;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    padding: 10px;
}

.reader-sentence {
    border-left: 4px solid transparent;
    border-radius: 9px;
    box-sizing: border-box;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) 32px;
    margin: 0 0 12px;
    padding: 6px;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.reader-sentence--active {
    background: rgb(255 255 255 / 54%);
    border-left-color: #ffdf66;
    box-shadow: inset 0 0 0 1px rgb(255 223 102 / 42%);
}

.reader-sentence-text {
    color: #4c4858;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(16px, 4.7vw, 19px);
    font-weight: 900;
    grid-column: 1;
    line-height: 1.48;
    margin: 0;
}

.reader-sentence-translate,
.reader-word-popover-sound,
.reader-control {
    transition: transform 0.08s ease, filter 0.08s ease, background-color 0.08s ease;
}

.reader-sentence-translate:active,
.reader-word-popover-sound:active,
.reader-control:active {
    filter: brightness(0.96);
    transform: translateY(1px) scale(0.97);
}

.reader-sentence-translate {
    align-items: center;
    align-self: start;
    background: #e5edf2;
    border: 1px solid #d2d9de;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.reader-sentence-translate img {
    display: block;
    height: 20px;
    width: 20px;
}

.reader-sentence-translation {
    background: rgb(220 243 255 / 78%);
    border: 1px solid rgb(147 211 244 / 72%);
    border-radius: 8px;
    color: #315f7c;
    font-size: 14px;
    font-weight: 800;
    grid-column: 1 / 3;
    line-height: 1.35;
    padding: 9px 10px;
}

.reader-word {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.reader-word-unit {
    white-space: nowrap;
}

.reader-word:hover,
.reader-word:focus {
    color: #2875d9;
    outline: none;
}

.reader-word--active {
    background: #fff6a8;
    border-radius: 4px;
    box-shadow: 0 0 0 3px #fff6a8;
    color: #4a3e23;
}

.reader-word-popover {
    background: rgb(255 255 255 / 96%);
    border: 2px solid #b6d5ff;
    border-radius: 16px;
    box-shadow: 0 5px 14px rgb(0 69 112 / 20%);
    box-sizing: border-box;
    color: #2f466e;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    max-width: min(320px, calc(100% - 24px));
    min-width: min(250px, calc(100% - 24px));
    padding: 48px 12px 12px;
    position: fixed;
    z-index: 70;
}

.reader-word-popover-close {
    align-items: center;
    background: #ffab91;
    border: 2px solid #ff8a65;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    left: 8px;
    padding: 0;
    position: absolute;
    top: 7px;
    width: 32px;
}

.reader-word-popover-close img {
    display: block;
    height: 18px;
    width: 18px;
}

.reader-word-popover-body {
    border-top: 2px solid rgb(182 213 255 / 42%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 5px;
    min-width: 0;
    padding-top: 8px;
}

.reader-word-popover-sound {
    align-items: center;
    background: #dff3ff;
    border: 1px solid #8dd2f2;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 7px;
    width: 36px;
}

.reader-word-popover-sound img {
    display: block;
    height: 23px;
    width: 23px;
}

.reader-word-popover-word {
    color: #5c42d7;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

.reader-word-popover-translation {
    color: #506070;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.book-reader-controls {
    align-items: center;
    background: rgb(255 255 255 / 96%);
    border: 1px solid #dedee4;
    border-radius: 0;
    bottom: 0;
    box-shadow: 0 -2px 9px rgb(0 75 110 / 16%);
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
    height: 92px;
    left: 50%;
    max-width: 1200px;
    padding: 10px 20px 16px;
    position: fixed;
    transform: translateX(-50%);
    width: 100%;
    z-index: 50;
}

.reader-control {
    align-items: center;
    background: #f0e8de;
    border: 0;
    border-radius: 14px;
    color: #b8b8b8;
    cursor: pointer;
    display: inline-flex;
    font-family: "Nunito", Arial, sans-serif;
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 900;
    height: 54px;
    justify-content: center;
    padding: 0 0 5px;
}

.reader-control--play {
    align-self: center;
    background: #fff8ff;
    border: 5px solid #6472d3;
    border-radius: 18px;
    height: 66px;
    justify-self: center;
    padding: 0;
    width: 66px;
}

.reader-control-icon {
    display: block;
    height: 30px;
    width: 30px;
}

.reader-control-icon--pause {
    display: none;
}

.reader-control--pause .reader-control-icon--play {
    display: none;
}

.reader-control--pause .reader-control-icon--pause {
    display: block;
}

.reader-control:disabled {
    cursor: default;
    opacity: 0.42;
}

@media screen and (min-width: 901px) {
    .books-row-control {
        display: flex;
    }

    .book-card {
        flex-basis: 152px;
    }

    .books-page {
        max-width: 760px;
    }

    .book-reader-text {
        padding-left: 46px;
        padding-right: 46px;
    }
}

html[lang="ka"] .book-card-title,
html[lang="ka"] .book-card-level,
html[lang="ka"] .book-card-progress,
html[lang="ka"] .book-reader-page-pill,
html[lang="ka"] .reader-sentence-text,
html[lang="ka"] .reader-word-popover-word,
html[lang="ka"] .reader-control {
    font-family: "Nunito", Arial, sans-serif;
    font-weight: 900 !important;
    letter-spacing: 0;
}