:root {
    /* Parchment Theme (Default) */
    --body-bg-color: #1a0a2a;
    --body-bg-image: url('https://omniakashica.com/wp-content/uploads/2025/04/Designer-97.jpeg');
    --body-text-color: #f0e6d2; /* Old paper/bone white */
    --book-cover-bg-color: #3d0e4a; /* Darker purple */
    --book-cover-text-color-h1: #e0c87a; /* Goldish text */
    --book-cover-text-color-subtitle: #d1b87a;
    --book-pages-bg-color: #2a103a; /* Darker interior */
    --page-bg-color: #efebe0; /* Old paper color */
    --page-text-color: #333;
    --page-heading-color-h2: #4a0f5a; /* Dark purple heading */
    --page-heading-color-h3: #6f2a7a;
    --page-heading-color-h4: #8c3f9a;
    --page-sigil-color: #8c3f9a;
    --book-footer-bg-color: #3d0e4a;
    --dock-bg-color-70: rgba(61, 14, 74, 0.7); /* 70% transparent version */
    --button-bg-color: #e0c87a; /* Goldish button */
    --button-text-color: #3d0e4a;
    --button-border-color: #a88b5a;
    --button-hover-bg-color: #a88b5a;
    --scrollbar-track-color: #4a0f5a;
    --scrollbar-thumb-color: #e0c87a;
    --scrollbar-thumb-hover-color: #a88b5a;
    --modal-bg-color: rgba(26, 10, 42, 0.95); /* Dark purple/black with transparency */
    --modal-content-bg-color: #3d0e4a;
    --modal-text-color: #f0e6d2;
    --modal-border-color: #a88b5a;
    --modal-close-color: #f0e6d2;
    --modal-close-hover-color: #e0c87a;
    --active-button-border: 2px solid #e0c87a;
    --active-button-shadow: 0 0 10px #e0c87a;

    /* New variable to control page font family dynamically */
    --page-font-family: 'Cinzel', serif;
}

/* Midnight Theme */
html[data-theme="midnight"] {
    --body-bg-color: #0d0615;
    --body-bg-image: none; /* No background image for midnight */
    --body-text-color: #c9c0b0;
    --book-cover-bg-color: #1a0823;
    --book-cover-text-color-h1: #a09070;
    --book-cover-text-color-subtitle: #8b7a60;
    --book-pages-bg-color: #15071d;
    --page-bg-color: #220b2e;
    --page-text-color: #c9c0b0;
    --page-heading-color-h2: #7a3f8c;
    --page-heading-color-h3: #9b5ea8;
    --page-heading-color-h4: #a87ac9;
    --page-sigil-color: #a87ac9;
    --book-footer-bg-color: #1a0823;
    --dock-bg-color-70: rgba(26, 8, 35, 0.7); /* 70% transparent version */
    --button-bg-color: #a09070;
    --button-text-color: #1a0823;
    --button-border-color: #7a6a50;
    --button-hover-bg-color: #7a6a50;
    --scrollbar-track-color: #15071d;
    --scrollbar-thumb-color: #7a6a50;
    --scrollbar-thumb-hover-color: #605040;
    --modal-bg-color: rgba(13, 6, 21, 0.98);
    --modal-content-bg-color: #1a0823;
    --modal-text-color: #c9c0b0;
    --modal-border-color: #7a6a50;
    --modal-close-color: #c9c0b0;
    --modal-close-hover-color: #a09070;
}

/* Amanhecer Theme */
html[data-theme="amanhecer"] {
    --body-bg-color: #e0e6f0; /* Soft light blue-grey, morning sky */
    --body-bg-image: none;
    --body-text-color: #333333;
    --book-cover-bg-color: #f0e6d2; /* Soft cream */
    --book-cover-text-color-h1: #d68911; /* Bright orange/gold, sunrise */
    --book-cover-text-color-subtitle: #cc7a00;
    --book-pages-bg-color: #f5f0e6; /* Lighter cream */
    --page-bg-color: #ffffff; /* Pure white for morning light effect */
    --page-text-color: #222222;
    --page-heading-color-h2: #a34a00; /* Deep burnt orange */
    --page-heading-color-h3: #cc7a00;
    --page-heading-color-h4: #e09d40;
    --page-sigil-color: #d68911;
    --book-footer-bg-color: #d6e0f0; /* Light blue-grey, soft sky */
    --dock-bg-color-70: rgba(214, 224, 240, 0.7); /* 70% transparent version */
    --button-bg-color: #f0c87a; /* Light gold */
    --button-text-color: #333333;
    --button-border-color: #cc7a00;
    --button-hover-bg-color: #e09d40;
    --scrollbar-track-color: #e0e6f0;
    --scrollbar-thumb-color: #d68911;
    --scrollbar-thumb-hover-color: #cc7a00;
    --modal-bg-color: rgba(224, 230, 240, 0.95);
    --modal-content-bg-color: #f5f0e6;
    --modal-text-color: #333333;
    --modal-border-color: #cc7a00;
    --modal-close-color: #333333;
    --modal-close-hover-color: #d68911;
    --active-button-border: 2px solid #cc7a00;
    --active-button-shadow: 0 0 10px #e09d40;
}

body {
    margin: 0;
    font-family: 'Cinzel', serif;
    background-color: var(--body-bg-color);
    background-image: var(--body-bg-image);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: var(--body-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure body takes full viewport height */
    overflow: hidden;
    perspective: 1000px; /* For 3D book effect */
    transition: background-color 0.5s ease; /* Smooth transition for theme change */
}

/* Font Size Classes */
body.font-small {
    font-size: 0.9em;
}
body.font-medium {
    font-size: 1em; /* Default */
}
body.font-large {
    font-size: 1.1em;
}

/* Adjust specific elements for font size */
.page p, .page ul, .page ol {
    font-size: 1em; /* Base font for these elements, will be scaled by body font-size */
}
body.font-small .page p, body.font-small .page ul, body.font-small .page ol {
    font-size: 0.9em;
}
body.font-large .page p, body.font-large .page ul, body.font-large .page ol {
    font-size: 1.1em;
}

.book-container {
    width: 800px;
    height: 95vh; /* Book occupies 95% of viewport height */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-in-out;
}

.book-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--book-cover-bg-color);
    background-image: url('cover_texture.png'); /* Occult texture */
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform-origin: left center; /* For opening animation */
    transition: transform 1s ease-in-out, z-index 0s 0.5s, background-color 0.5s ease; /* Delay z-index change */
    z-index: 10;
}

.book-cover h1 {
    font-family: 'IM Fell English SC', serif;
    font-size: 4em;
    margin-bottom: 10px;
    color: var(--book-cover-text-color-h1); /* Goldish text */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.book-cover .subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: var(--book-cover-text-color-subtitle);
    margin-bottom: 40px;
}

#flame-animation {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    border-radius: 50%; /* Just to make it a circle placeholder */
    display: flex;
    justify-content: center;
    align-items: center;
}

#open-book-btn {
    background-color: var(--button-bg-color); /* Goldish button */
    color: var(--button-text-color);
    border: 2px solid var(--button-border-color);
    padding: 15px 30px;
    font-size: 1.5em;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px; /* ensure consistent visible width */
    min-height: 48px;
}

#open-book-btn:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-2px);
}

/* Make 'Meu Grimório' visually identical to 'Abrir Livro' */
.cover-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: 2px solid var(--button-border-color);
    padding: 15px 30px;
    font-size: 1.5em;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s, transform 0.3s, color 0.3s, border-color 0.3s;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px; /* ensure consistent visible width */
    min-height: 48px;
    margin-top: 10px; /* spacing when stacked */
}

.cover-btn:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-2px);
}

/* Ensure 'Meu Grimório' exactly matches 'Abrir Livro' visible size and text scale */
#my-grimoire-btn {
        padding: 10px 20px;
        font-size: 1.2em;
}

.book-container.open .book-cover {
    transform: rotateY(-160deg); /* Opens the cover */
    transform-origin: left center;
    z-index: 0; /* Move behind pages */
    transition: transform 1s ease-in-out, z-index 0s 0.5s, background-color 0.5s ease;
}

.book-pages {
    position: absolute;
    width: 100%;
    height: 100%; /* Now takes full height of book-container */
    background-color: var(--book-pages-bg-color); /* Darker interior */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: left center;
    transform: rotateY(0deg); /* Stays flat initially */
    z-index: 5; /* Pages are above the cover initially */
    transition: background-color 0.5s ease;
}

/* New container for dynamically loaded pages */
#pages-container {
    position: relative; /* Allows absolute positioning of child pages */
    flex: 1; /* Take up all available space */
    overflow: hidden; /* Hide overflow of individual pages */
    display: flex; /* Make it a flex container to manage current-page display */
    width: 100%;
    height: 100%; /* Pages now fill the #pages-container */
}

.page {
    flex-shrink: 0; /* Prevent pages from shrinking */
    background-color: var(--page-bg-color); /* Old paper color */
    color: var(--page-text-color);
    padding: 30px;
    box-sizing: border-box;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.1);
    font-family: var(--page-font-family); /* use variable for dynamic font switching */
    overflow-y: auto;
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Not clickable when hidden */
    transform: translateX(100%); /* Start off-screen right */
    transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    position: absolute; /* Keep pages absolute for transitions */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; /* Pages now fill the #pages-container */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-weight: 500; /* Slightly bolder for improved legibility */
    color: #262626; /* Slightly darker text for better contrast */
    background-image: none; /* Ensure no subtle background textures blur text contrast */
}

.page.current-page {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

.page-content {
    max-width: 90%;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    filter: none; /* Ensure no visual blurring from filters */
}

.page h2 {
    font-family: var(--page-font-family);
    font-size: 2.5em;
    color: #3b0f52; /* Slightly stronger heading color */
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--page-heading-color-h3);
    padding-bottom: 10px;
    transition: color 0.5s ease, border-color 0.5s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 700;
}

.page h3 {
    font-family: var(--page-font-family);
    font-size: 1.8em;
    color: var(--page-heading-color-h3);
    margin-top: 25px;
    margin-bottom: 10px;
    transition: color 0.5s ease;
}

.page h4 {
    font-family: var(--page-font-family);
    font-size: 1.3em;
    color: var(--page-heading-color-h4);
    margin-top: 15px;
    margin-bottom: 5px;
    transition: color 0.5s ease;
}

/* Improve paragraph/list clarity */
.page p, .page ul, .page ol {
    font-family: var(--page-font-family); /* use variable */
    font-size: 1.1em;
    line-height: 1.7; /* Slightly increased line-height for readability */
    margin-bottom: 15px;
    transition: color 0.5s ease;
    color: inherit;
    font-weight: 450; /* Tighter weight for nicer texture */
    letter-spacing: 0.2px; /* Minor tracking for crispness */
    text-shadow: 0.2px 0.2px 0 rgba(0,0,0,0.02); /* Subtle sharpening */
}

/* Improve headings contrast and crispness */
.page h2 {
    font-family: var(--page-font-family);
    font-size: 2.5em;
    color: #3b0f52; /* Slightly stronger heading color */
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--page-heading-color-h3);
    padding-bottom: 10px;
    transition: color 0.5s ease, border-color 0.5s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 700;
}

/* Slightly sharpen sigil appearance */
.sigil {
    font-family: 'Arial Unicode MS', sans-serif; /* For better glyph rendering */
    font-size: 3.4em; /* Slightly larger for clearer glyphs */
    text-align: center;
    margin-top: 30px;
    color: var(--page-sigil-color);
    opacity: 0.95; /* More solid */
    transition: color 0.5s ease;
    text-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 2px 6px rgba(0,0,0,0.12);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0); /* Force GPU to render crisply */
}

.book-footer {
    position: fixed; /* Changed to fixed for floating behavior */
    bottom: 20px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to truly center */
    width: auto; /* Auto width to fit content */
    min-width: 320px; /* Minimum width to prevent squishing */
    height: 70px; /* Fixed height for footer */
    background-color: var(--dock-bg-color-70); /* Darker purple, similar to cover */
    border: 1px solid var(--button-border-color); /* Added a border */
    border-radius: 15px; /* More rounded for a floating look */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between buttons */
    box-sizing: border-box;
    padding: 0 20px;
    z-index: 20; /* Above everything */
    opacity: 0; /* Hidden by default */
    pointer-events: none;
    transition: opacity 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}

.book-container.open + .book-footer { /* Selects the footer after open book container */
    opacity: 1;
    pointer-events: all;
}

.nav-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px; /* Adjusted padding for better look in footer */
    font-size: 1.8em; /* Adjusted font size */
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.9;
    transition: opacity 0.3s, background-color 0.3s, color 0.3s;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.nav-button:hover {
    opacity: 1;
    background-color: var(--button-hover-bg-color);
}

.nav-button i { /* For Font Awesome icons */
    font-size: 1em; /* Adjust icon size relative to button font size */
}

/* New style for Page Indicator Input */
#page-indicator {
    color: var(--modal-close-color); /* Requested white/light color */
    background-color: var(--scrollbar-track-color); /* Darker background like scrollbar track */
    border: 1px solid var(--button-border-color); /* Border color similar to buttons */
    padding: 8px 12px;
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    flex-grow: 0; /* No flex-grow, let container handle it */
    text-align: center;
    white-space: nowrap; /* Prevent wrapping */
    border-radius: 5px;
    -moz-appearance: textfield; /* Hide arrows for Firefox */
    transition: all 0.3s ease; /* Smooth transitions for theme changes */
    width: 45px; /* Fixed width for the input part */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Hide arrow buttons for Chrome, Safari, Edge */
#page-indicator::-webkit-outer-spin-button,
#page-indicator::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#page-indicator:focus {
    outline: none;
    border-color: var(--active-button-border); /* Highlight on focus */
    box-shadow: 0 0 5px var(--active-button-shadow);
}

/* Scrollbar styles for occult theme */
.page::-webkit-scrollbar {
    width: 8px;
}

.page::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color); /* Dark track */
}

.page::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color); /* Goldish thumb */
    border-radius: 4px;
}

.page::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color); /* Darker goldish on hover */
}

/* Settings Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--modal-bg-color);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--modal-content-bg-color);
    margin: auto;
    padding: 30px;
    border: 2px solid var(--modal-border-color);
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
    position: relative;
    color: var(--modal-text-color);
    font-family: 'Cinzel', serif;
    text-align: center;

    /* Ensure modal content can scroll internally on small viewports */
    max-height: 80vh;
    overflow-y: auto;
}

.modal-content h2 {
    font-family: 'IM Fell English SC', serif;
    font-size: 2.2em;
    color: var(--book-cover-text-color-h1);
    margin-bottom: 25px;
    border-bottom: 1px dashed var(--modal-border-color);
    padding-bottom: 10px;
}

.modal-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: var(--book-cover-text-color-subtitle);
    margin-top: 20px;
    margin-bottom: 15px;
}

.close-button {
    color: var(--modal-close-color);
    font-size: 2.5em;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: var(--modal-close-hover-color);
    text-decoration: none;
}

.setting-section {
    margin-bottom: 30px;
    border: 1px solid var(--modal-border-color);
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.1);
}

.font-size-controls,
.theme-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.font-size-btn,
.theme-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: 2px solid var(--button-border-color);
    padding: 10px 20px;
    font-size: 1em;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.font-size-btn:hover,
.theme-btn:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-1px);
}

.font-size-btn.active,
.theme-btn.active {
    background-color: var(--button-hover-bg-color);
    border: var(--active-button-border);
    box-shadow: var(--active-button-shadow);
    cursor: default;
}

/* Music Controls Styles */
.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--button-bg-color); /* Off color */
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--button-text-color); /* Knob color */
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--button-hover-bg-color); /* On color */
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--button-hover-bg-color);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Volume Slider Styles */
#music-volume {
    -webkit-appearance: none;
    width: 150px;
    height: 10px;
    background: var(--scrollbar-track-color);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
}

#music-volume:hover {
    opacity: 1;
}

#music-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--scrollbar-thumb-color);
    cursor: pointer;
}

#music-volume::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--scrollbar-thumb-color);
    cursor: pointer;
}

/* Registry Modal Specific Styles */
.registry-select {
    width: calc(100% - 20px); /* Adjust for padding */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--modal-border-color);
    border-radius: 5px;
    background-color: var(--scrollbar-track-color); /* Darker background */
    color: var(--modal-text-color);
    font-family: 'Cinzel', serif;
    font-size: 1em;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.registry-select:focus {
    outline: none;
    border-color: var(--active-button-border);
    box-shadow: 0 0 5px var(--active-button-shadow);
}

.registry-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    text-align: left; /* Align form labels/inputs to the left */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    color: var(--modal-text-color);
    font-size: 0.9em;
    opacity: 0.8;
}

.registry-form input[type="text"],
.registry-form textarea {
    padding: 10px;
    border: 1px solid var(--modal-border-color);
    border-radius: 5px;
    background-color: var(--scrollbar-track-color); /* Darker background */
    color: var(--modal-text-color);
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    transition: border-color 0.3s, background-color 0.3s;
}

.registry-form input[type="text"]:focus,
.registry-form textarea:focus {
    outline: none;
    border-color: var(--active-button-border);
    box-shadow: 0 0 5px var(--active-button-shadow);
}

.registry-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.registry-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: 2px solid var(--button-border-color);
    padding: 10px 20px;
    font-size: 1em;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    flex-grow: 1; /* Allow buttons to grow */
    min-width: 150px; /* Minimum width */
}

.registry-button:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .book-container {
        width: 90vw;
        height: 95vh; /* Ensure 95vh on smaller screens too */
    }
    .book-cover h1 {
        font-size: 3em;
    }
    .book-cover .subtitle {
        font-size: 1.2em;
    }
    #open-book-btn {
        padding: 10px 20px;
        font-size: 1.2em;
    }
    .page h2 {
        font-size: 2em;
    }
    .page h3 {
        font-size: 1.5em;
    }
    .page p, .page ul, .page ol {
        font-size: 1em;
    }
    .nav-button {
        padding: 8px 15px;
        font-size: 1.5em;
    }
    .page {
        height: 100%; /* No need to adjust for footer anymore */
    }
    .book-footer {
        height: 70px; /* Consistent footer height */
        gap: 15px;
        bottom: 15px; /* Slightly closer to bottom on smaller screens */
    }
    .modal-content {
        width: 90%;
        padding: 20px;
    }
    .modal-content h2 {
        font-size: 1.8em;
    }
    .modal-content h3 {
        font-size: 1.3em;
    }
    .font-size-btn,
    .theme-btn,
    .registry-button { /* Apply to registry buttons too */
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .registry-select,
    .registry-form input[type="text"],
    .registry-form textarea {
        font-size: 0.9em;
    }
}

@media (max-width: 600px) {
    .book-container {
        width: 95vw;
        height: 95vh; /* Ensure 95vh on smallest screens too */
    }
    .book-cover h1 {
        font-size: 2.5em;
    }
    .book-cover .subtitle {
        font-size: 1em;
    }
    #open-book-btn {
        padding: 8px 15px;
        font-size: 1em;
    }
    .page h2 {
        font-size: 1.8em;
    }
    .page h3 {
        font-size: 1.3em;
    }
    .page p, .page ul, .page ol {
        font-size: 0.9em;
    }
    .nav-button {
        padding: 4px 8px; /* Reduced padding for smaller buttons */
        font-size: 1em; /* Smaller icons */
    }
    .page {
        height: 100%; /* No need to adjust for footer anymore */
    }
    .book-footer {
        height: 50px; /* Fixed smaller height */
        gap: 5px; /* Reduced gap */
        flex-wrap: nowrap; /* Force single line */
        padding: 0 5px; /* Reduced padding */
        bottom: 10px; /* Closer to bottom on smallest screens */
        max-width: 95vw; /* Limit width */
        min-width: unset; /* Remove min-width constraint */
        border-radius: 10px; /* Slightly less rounded for tighter space */
        overflow-x: auto; /* Allow horizontal scroll if needed */
        -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on touch devices */
        justify-content: space-between; /* Spread elements evenly */
    }
    #page-indicator {
        font-size: 0.75em; /* Reduced font size */
        padding: 3px 5px; /* Reduced padding */
        width: 25px; /* Tighten input width */
        flex-basis: auto;
        order: unset; /* Remove explicit order intended for wrapped layout */
        margin-bottom: 0; /* Remove margin bottom intended for wrapped layout */
        max-width: 100px;
    }
    .page-indicator-container {
        gap: 2px; /* Reduce gap in indicator container */
        max-width: 100px;
        min-width: 70px;
    }
    .total-pages-span {
        font-size: 0.9em;
    }
    .modal-content {
        padding: 15px;
    }
    .modal-content h2 {
        font-size: 1.5em;
    }
    .modal-content h3 {
        font-size: 1.1em;
    }
    .font-size-btn,
    .theme-btn,
    .registry-button { /* Apply to registry buttons too */
        padding: 6px 12px;
        font-size: 0.8em;
    }
    .registry-select,
    .registry-form input[type="text"],
    .registry-form textarea {
        font-size: 0.85em;
    }
    .registry-form {
        gap: 10px; /* Reduce gap in form */
    }
    .registry-controls {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px;
    }
    .registry-button {
        width: 100%; /* Full width when stacked */
        min-width: unset; /* Remove min-width constraint */
    }
    .close-button {
        font-size: 2em;
        top: 5px;
        right: 10px;
    }
    .music-controls {
        flex-direction: column; /* Stack controls vertically */
        gap: 10px;
    }
    #music-volume {
        width: 100%; /* Make slider full width */
    }
}

/* Reuse registry-select styling for site-font dropdown; ensure visual parity */
#site-font-select {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 0;
    border: 1px solid var(--modal-border-color);
    border-radius: 5px;
    background-color: var(--scrollbar-track-color);
    color: var(--modal-text-color);
    font-family: 'Cinzel', serif;
    font-size: 1em;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}
#site-font-select:focus {
    outline: none;
    border-color: var(--active-button-border);
    box-shadow: 0 0 5px var(--active-button-shadow);
}

/* New container for page indicator and total pages */
.page-indicator-container {
    display: flex; /* Use flexbox to align input and span */
    align-items: center; /* Center vertically */
    gap: 5px; /* Small gap between input and text */
    flex-grow: 1; /* Allows it to take up available space */
    justify-content: center; /* Center the content horizontally */
    white-space: nowrap; /* Prevent wrapping inside the container */
    max-width: 150px; /* Limit overall width of the combined element */
    min-width: 90px; /* Ensure it's not too small */
}

/* Style for the total pages span */
.total-pages-span {
    color: var(--modal-close-color); /* Match input text color */
    font-family: 'Cinzel', serif;
    font-size: 1.2em; /* Match input font size */
    transition: color 0.3s ease; /* Smooth transition for theme changes */
}

/* Index Modal Specific Styles */

.index-list-container {
    max-height: 70vh; /* Make sure it doesn't exceed screen height */
    overflow-y: auto;
    padding: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--modal-border-color);
}

.index-toc {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.index-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 5px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: background-color 0.2s, box-shadow 0.2s;
    border-left: 5px solid var(--page-sigil-color);
}

.index-item:hover {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 8px var(--page-sigil-color);
}

.index-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: var(--modal-text-color);
    flex-grow: 1;
}

.index-page-number {
    font-family: 'IM Fell English SC', serif;
    font-size: 1.2em;
    color: var(--book-cover-text-color-h1);
    margin-left: 10px;
    flex-shrink: 0;
}

/* App Alert Modal overrides (lightweight alert look) */
.app-alert-modal .modal-content {
    max-width: 420px;
    width: 90%;
    padding: 22px;
    text-align: center;
}
.app-alert-modal #app-alert-title {
    font-family: 'IM Fell English SC', serif;
    font-size: 1.8em;
    color: var(--book-cover-text-color-h1);
    margin-bottom: 8px;
}
.app-alert-modal #app-alert-message {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: var(--modal-text-color);
    max-height: 40vh;
    overflow-y: auto;
    text-align: left;
    background: rgba(0,0,0,0.03);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Make modal close button smaller for alert */
.app-alert-modal .close-button { display:none; }

/* Ensure OK button matches existing button style */
#app-alert-ok {
    min-width: 120px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 2px solid var(--button-border-color);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    cursor: pointer;
}
#app-alert-ok:hover {
    background-color: var(--button-hover-bg-color);
    transform: translateY(-1px);
}

/* Scrollbar styles for modal-content to match application scrollbars */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
}

/* Firefox scrollbar support */
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}