/* MOBILE RESPONSIVE BREAKPOINTS */
@media (max-width: 600px) {
    /* Book container */
    #book-container {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }

    /* Page content */
    .page-content {
        padding: 25px;
        font-size: 17px;
    }

    /* Hide corners on mobile */
    .corner {
        display: none;
    }

    /* Menu toggle */
    #menu-toggle {
        top: 10px;
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    /* Toolbar */
    #toolbar {
        top: 55px;
        padding: 8px 12px;
        gap: 8px;
    }

    .tool-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Bookmark ribbon */
    .bookmark-ribbon {
        position: absolute;
        top: 0;
        right: 22px;
        width: 24px;
        height: 32px;
        z-index: 50;
        cursor: pointer;
        background-image: url("bookmark.png");
        background-size: 24px 32px;
    }

    .bookmark-ribbon:hover {
        background-image: url("remove-bookmark.png");
    }

    .nav-item .bookmark-ribbon {
        top: -15px;
        right: -27px;
        width: 12px;
        height: 16px;
        background-image: url("bookmark.png");
        background-size: 12px 16px;
    }

    /* TTS controls */
    #tts-controls {
        bottom: 15px;
        padding: 10px 14px;
        width: auto;
        max-width: 90%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tts-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    #voice-select {
        max-width: 110px;
        font-size: 12px;
        padding: 4px;
    }

    #speed-range {
        width: 70px;
    }

    #speed-label {
        font-size: 11px;
    }

    /* Nav modal */
    .nav-content {
        padding: 15px;
        max-width: 95%;
    }

    /* Typography adjustments */
    p {
        margin-bottom: 1.5em;
    }

    .rhythm {
        margin: 2em 0;
        font-size: 0.85em;
    }

    small {
        font-size: 3.5vw;
    }

    /* Ritual and angel boxes */
    .ritual-box,
    .angel-seal {
        padding: 1.2em;
        margin: 1.5em 0;
    }
}

/* Tablet adjustments */
@media (min-width: 601px) and (max-width: 1024px) {
    #book-container {
        width: 95%;
        height: 90vh;
    }

    .page-content {
        padding: 40px;
        font-size: 18px;
    }

    #toolbar {
        top: 60px;
        padding: 10px 14px;
    }

    .tool-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Large screens */
@media (min-width: 1025px) {
    #book-container {
        max-width: 900px;
    }

    .page-content {
        padding: 60px;
    }
}

/* Prevent toolbar from blocking text touches */
#toolbar {
    pointer-events: none;
}

#toolbar.active,
#toolbar.visible {
    pointer-events: auto;
}

/* Ensure text selection works */
.page-content {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Hide empty voice dropdown */
#voice-select:empty {
    display: none !important;
}

#voice-select option:first-child:only-child {
    display: none;
}

/* Force modal visibility when class added */
#nav-modal.show {
    display: flex !important;
}

.nav-content {
    background: var(--bg-secondary) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    max-width: 400px !important;
    width: 90% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 10px 30px var(--shadow) !important;
}