/* =========================================================
   CONTENEDORES Y SISTEMA DE GRILLAS
   LIBRO / GRIMORIO DE LEONHART
   ========================================================= */

.book-wrapper {
    width: min(97vw, 1660px);
    height: calc(100dvh - 16px);

    margin: 8px auto;

    padding: clamp(10px, 1.3vw, 22px);

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    gap: clamp(8px, 1.2vh, 15px);

    position: relative;

    background:
        linear-gradient(
            145deg,
            #16120e 0%,
            #080909 48%,
            #17130e 100%
        );

    border: 3px solid #5f4018;
    border-radius: 12px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(0, 0, 0, 0.85),
        inset 0 0 0 2px rgba(218, 168, 67, 0.06);

    overflow: hidden;
}


/* =========================================================
   NAVEGACIÓN SUPERIOR E INFERIOR
   ========================================================= */

.book-nav-top,
.book-nav-bottom {
    display: flex;

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

    flex-shrink: 0;

    background:
        linear-gradient(
            180deg,
            #211d16 0%,
            #15120e 100%
        );

    border: 2px solid #76501c;

    padding:
        clamp(8px, 1vh, 13px)
        clamp(14px, 1.6vw, 24px);

    box-shadow:
        inset 0 1px rgba(255, 216, 130, 0.08),
        inset 0 -8px 18px rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.5);

    border-radius: 3px;
}


.book-nav-bottom {
    background:
        linear-gradient(
            0deg,
            #211d16 0%,
            #15120e 100%
        );
}


.nav-left,
.nav-right {
    display: flex;
    gap: clamp(8px, 1vw, 15px);
    align-items: center;
}


.page-indicator {
    font-family: var(--font-heading);

    color: var(--gold);

    font-size: clamp(1rem, 1.3vw, 1.35rem);

    font-weight: bold;

    letter-spacing: 1px;
}


/* =========================================================
   INTERIOR DEL LIBRO
   ========================================================= */

#character-container {
    position: relative;

    flex: 1;

    min-height: 0;

    padding:
        clamp(10px, 1.3vh, 18px)
        clamp(12px, 1.3vw, 22px);

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 47%,
            rgba(0, 0, 0, 0.12) 49%,
            rgba(0, 0, 0, 0.32) 50%,
            rgba(0, 0, 0, 0.12) 51%,
            transparent 53%,
            transparent 100%
        ),

        radial-gradient(
            ellipse at center,
            #17140f 0%,
            #0c0c09 67%,
            #060706 100%
        );

    border: 1px solid rgba(173, 118, 34, 0.75);

    border-radius: 5px 5px 10px 10px;

    box-shadow:
        inset 18px 0 30px rgba(0, 0, 0, 0.45),
        inset -18px 0 30px rgba(0, 0, 0, 0.45),
        inset 0 0 45px rgba(0, 0, 0, 0.65),
        0 7px 15px rgba(0, 0, 0, 0.7);
}


/* =========================================================
   LOMO DEL LIBRO
   ========================================================= */

#character-container::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;

    left: 50%;

    width: 12px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, 0.65),
            rgba(183, 128, 39, 0.08),
            rgba(0, 0, 0, 0.72),
            transparent
        );

    box-shadow:
        -8px 0 15px rgba(0, 0, 0, 0.20),
        8px 0 15px rgba(0, 0, 0, 0.20);

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   BORDE DE LAS HOJAS
   ========================================================= */

#character-container::after {
    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px solid rgba(203, 151, 61, 0.10);

    border-radius: 4px;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 2px rgba(213, 164, 72, 0.03),
        inset 0 0 0 5px rgba(0, 0, 0, 0.10);

    z-index: 0;
}


#character-container > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   DISTRIBUCIÓN PRINCIPAL
   ========================================================= */

.character-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        clamp(245px, 21vw, 330px)
        minmax(360px, 1fr)
        clamp(245px, 21vw, 330px);

    gap: clamp(10px, 1.3vw, 20px);

    min-height: 0;

    align-items: stretch;
}


/* =========================================================
   BLOQUES INFERIORES
   ========================================================= */

.bottom-layout {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(10px, 1.3vw, 20px);

    margin-top:
        clamp(10px, 1.4vh, 18px);
}


.footer-layout {
    display: grid;

    grid-template-columns:
        1fr 2fr;

    gap: clamp(10px, 1.3vw, 20px);

    margin-top:
        clamp(10px, 1.4vh, 18px);
}


/* =========================================================
   FOOTER
   ========================================================= */

.game-footer {
    text-align: center;

    color: var(--bronze-dark);

    font-family: var(--font-heading);

    font-size: 0.85rem;

    letter-spacing: 2px;

    margin-top: 12px;

    padding-bottom: 8px;
}


/* =========================================================
   SCROLL DEL GRIMORIO
   ========================================================= */

#character-container::-webkit-scrollbar {
    width: 7px;
}


#character-container::-webkit-scrollbar-track {
    background:
        rgba(0, 0, 0, 0.3);
}


#character-container::-webkit-scrollbar-thumb {
    background:
        var(--bronze-dark);

    border-radius: 10px;
}


#character-container::-webkit-scrollbar-thumb:hover {
    background:
        var(--gold-dark);
}