* {
    box-sizing: border-box;
}

/* =========================
   BASE
========================= */

html {
    margin: 0;
    padding: 0;
    background: #111;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* =========================
   READER
========================= */

.reader-content {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 0;

    /* Reserve enough vertical space for the WHOLE chapter block while
       images are still loading in, not just one image's worth. A single
       500px floor per image only stops that one box from collapsing —
       if none of the chapter's images have painted yet, the container
       is still short relative to the viewport, so the bottom nav ends
       up sitting high on the page (reads as "flashing to the top")
       until images progressively push it down. Flooring the whole
       container to at least one viewport height keeps the nav below
       the fold from the very first paint. */
    min-height: 100vh;
}

/* =========================
   CHAPTER IMAGES
========================= */

.chapter-image {
    display: block;

    width: 100%;
    max-width: 1000px;
    height: auto;

    /* Floor height only — applies while the image is still loading.
       Once loaded, the image renders at its real full size as
       before; this only stops the box from collapsing to 0 during
       load, which is what was pulling the bottom nav to the top. */
    min-height: 500px;

    /* Without this, the browser's default object-fit (fill) stretches
       short/landscape panels vertically to reach the 500px floor,
       distorting them. contain keeps the image's real proportions —
       any leftover space in the box just shows the background below
       instead of a warped image. Tall portrait panels are unaffected
       since their auto height already exceeds 500px. */
    object-fit: contain;

    margin: 0 auto;
    padding: 0;

    border: 0;
    outline: none;

    background: #1b1b1b;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    image-rendering: auto;
}

.reader-content img {
    vertical-align: top;
}

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

.chapter-navigation {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 18px 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

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

.nav-button {
    min-width: 145px;
    height: 46px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid #333;
    border-radius: 8px;

    background: #1b1b1b;
    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

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

.nav-button:hover {
    background: #292929;
    border-color: #555;
    color: #fff;
}

.nav-button:active {
    transform: scale(0.97);
}

.nav-button.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* =========================
   SVG ICONS
========================= */

.nav-icon {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: block;

    stroke: currentColor;
}

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

.top-navigation {
    padding-top: 18px;
    padding-bottom: 18px;
}

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

.bottom-navigation {
    padding-top: 18px;
    padding-bottom: 30px;
}

/* =========================
   LOADING
========================= */

.loading {
    width: 100%;
    min-height: 300px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    color: #aaa;

    font-size: 14px;
    font-weight: 400;

    text-align: center;
}

/* =========================
   LOADING SPINNER
========================= */

.spinner {
    width: 38px;
    height: 38px;

    border: 3px solid #333;
    border-top-color: #fff;

    border-radius: 50%;

    animation: chapter-spinner 0.8s linear infinite;
}

@keyframes chapter-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   ERROR
========================= */

.error {
    width: 100%;
    min-height: 300px;

    padding: 40px 20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.error-title {
    margin: 0 0 8px;

    color: #fff;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.3;
}

.error-text {
    margin: 0;

    color: #999;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.5;
}

/* =========================
   DESKTOP
========================= */

@media (min-width: 601px) {

    .chapter-navigation {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-button {
        min-width: 145px;
    }

    .reader-content {
        max-width: 1000px;
    }

    .chapter-image {
        max-width: 1000px;
    }
}

/* =========================
   LARGE DESKTOP
========================= */

@media (min-width: 1200px) {

    .chapter-navigation {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .top-navigation {
        padding-top: 22px;
        padding-bottom: 20px;
    }

    .bottom-navigation {
        padding-top: 20px;
        padding-bottom: 35px;
    }

    .nav-button {
        min-width: 155px;
        height: 48px;

        font-size: 14px;
    }

    .nav-icon {
        width: 19px;
        height: 19px;

        flex-basis: 19px;
    }
}

/* =========================
   TABLET
========================= */

@media (max-width: 900px) and (min-width: 601px) {

    .chapter-navigation {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-button {
        min-width: 135px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .chapter-navigation {
        width: 100%;

        margin: 0;
        padding: 10px 6px;

        gap: 5px;
    }

    .nav-button {
        min-width: 0;
        width: 0;

        flex: 1 1 0;

        height: 42px;

        padding: 0 5px;

        gap: 5px;

        border-radius: 7px;

        font-size: 12px;

        white-space: nowrap;
        overflow: hidden;
    }

    .nav-icon {
        width: 16px;
        height: 16px;

        flex: 0 0 16px;
    }

    .top-navigation {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .bottom-navigation {
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .reader-content {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;
    }

    .chapter-image {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        /* Desktop's 500px floor is fine there because most panels,
           even wide ones, are naturally taller than 500px at desktop
           widths. On a narrow phone screen a wide/landscape panel can
           render well under 500px tall, so that same floor was
           reserving a much bigger box than the image needed — with
           object-fit: contain that showed up as a large empty gap of
           background above/below the image. 200px is still enough to
           stop the box collapsing to 0 before the image loads (which
           is what caused the original nav-flash bug) without forcing
           that much dead space on mobile. */
        min-height: 200px;
    }

    .loading {
        min-height: 250px;
        padding: 20px;
        font-size: 13px;
    }

    .spinner {
        width: 34px;
        height: 34px;
    }

    .error {
        min-height: 250px;
        padding: 30px 15px;
    }

    .error-title {
        font-size: 18px;
    }

    .error-text {
        font-size: 13px;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 380px) {

    .chapter-navigation {
        padding-left: 4px;
        padding-right: 4px;
        gap: 4px;
    }

    .nav-button {
        height: 40px;

        padding-left: 3px;
        padding-right: 3px;

        gap: 4px;

        font-size: 11px;
    }

    .nav-icon {
        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }

    .top-navigation {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .bottom-navigation {
        padding-top: 8px;
        padding-bottom: 14px;
    }
}

/* =========================
   ACCESSIBILITY
========================= */

.nav-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* =========================
   REDUCE MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .nav-button {
        transition: none;
    }

    .spinner {
        animation: none;
    }
}