/* The book header and the book reader. */

.book-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.book-header-text {
    min-width: 0;
}

/*
 * The open book, laid out like Minecraft 1.8's book screen: a 192 x 192 GUI with the text at
 * (36, 32), 114 px wide in 9 px lines, the page number ending at x 148 and the arrows at y 154.
 * Sizes are GUI pixels times --px. Without the game's book.png, the page is drawn in CSS.
 */
.mc-book-wrap {
    --px: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 419.98px) {
    .mc-book-wrap {
        --px: 1.75px;
    }
}

@media (max-width: 359.98px) {
    .mc-book-wrap {
        --px: 1.5px;
    }
}

.mc-book {
    position: relative;
    width: calc(192 * var(--px));
    height: calc(192 * var(--px));
    color: #000;
    font-family: "Minecraft Texture", "Pixelify Sans", monospace;
    font-size: calc(8 * var(--px));
    line-height: calc(9 * var(--px));
    /* Pixelify Sans is narrower than Minecraft's font; this spacing makes the lowercase alphabet the
       game's 145 px wide, so lines wrap about where they do in game. */
    letter-spacing: calc(1.15 * var(--px));
    -webkit-font-smoothing: none;
}

/* With the game's own font (built from textures/ascii.png), widths are already right. */
html.mc-font .mc-book {
    letter-spacing: 0;
}

/* Built-in drawing of the book: cream page with a shaded binding, on a leather cover. */
.mc-book::before {
    content: "";
    position: absolute;
    top: calc(1 * var(--px));
    left: calc(20 * var(--px));
    width: calc(146 * var(--px));
    height: calc(180 * var(--px));
    box-sizing: border-box;
    background:
        linear-gradient(90deg, rgba(120, 90, 40, .22), rgba(120, 90, 40, 0) calc(10 * var(--px))),
        #f6edd3;
    border: calc(2 * var(--px)) solid #3b2814;
    border-left-width: calc(6 * var(--px));
    border-bottom-width: calc(4 * var(--px));
    border-radius: calc(2 * var(--px));
    box-shadow: inset 0 0 0 var(--px) #e2d3a6, 0 12px 28px rgba(0, 0, 0, .3);
}

html.mc-book-texture .mc-book {
    background: url("../textures/book.png") 0 0 / calc(256 * var(--px)) calc(256 * var(--px)) no-repeat;
    image-rendering: pixelated;
}

html.mc-book-texture .mc-book::before {
    display: none;
}

.mc-page-number {
    position: absolute;
    top: calc(16 * var(--px));
    right: calc(44 * var(--px));
    white-space: nowrap;
}

.mc-page-text {
    position: absolute;
    top: calc(32 * var(--px));
    left: calc(36 * var(--px));
    width: calc(114 * var(--px));
    height: calc(126 * var(--px));
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mc-arrow {
    position: absolute;
    top: calc(154 * var(--px));
    width: calc(23 * var(--px));
    height: calc(13 * var(--px));
    padding: 0;
    border: 0;
    background: none;
    color: #8c6a3a;
    cursor: pointer;
}

.mc-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    padding: calc(2 * var(--px));
    box-sizing: border-box;
    fill: currentColor;
    shape-rendering: crispEdges;
}

.mc-arrow:hover,
.mc-arrow:focus-visible {
    color: #3b2814;
}

.mc-arrow:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
}

/* As in game, there is no arrow before the first page or after the last. */
.mc-arrow:disabled {
    visibility: hidden;
}

.mc-prev {
    left: calc(38 * var(--px));
}

.mc-next {
    left: calc(120 * var(--px));
}

/* With book.png, the arrows are its sprites: next at (0, 192), previous at (0, 205), lit 23 px right. */
html.mc-book-texture .mc-arrow {
    background: url("../textures/book.png") 0 calc(-192 * var(--px)) / calc(256 * var(--px)) calc(256 * var(--px)) no-repeat;
    image-rendering: pixelated;
}

html.mc-book-texture .mc-prev {
    background-position: 0 calc(-205 * var(--px));
}

html.mc-book-texture .mc-next:hover,
html.mc-book-texture .mc-next:focus-visible {
    background-position: calc(-23 * var(--px)) calc(-192 * var(--px));
}

html.mc-book-texture .mc-prev:hover,
html.mc-book-texture .mc-prev:focus-visible {
    background-position: calc(-23 * var(--px)) calc(-205 * var(--px));
}

html.mc-book-texture .mc-arrow svg {
    display: none;
}