/*
==============================================================
REVAMED MANSION
PHIRO BASELINE 005 — THE LIBRARY
==============================================================
*/

.scene-library {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            #101017 0 12%,
            #221c25 12% 73%,
            #100c10 73%
        );

    min-height: 430px;
}

.library-wall {
    position: absolute;
    inset: 12% 0 27%;

    border-top: 2px solid #4b3c37;
    border-bottom: 4px solid #302421;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0 2px,
            transparent 2px 86px
        ),
        linear-gradient(
            #2a222b,
            #1d181f
        );
}

.library-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 28%;

    background:
        repeating-linear-gradient(
            90deg,
            #211719 0 72px,
            #271b1b 72px 75px
        );

    box-shadow:
        inset 0 20px 35px rgba(0,0,0,.45);
}

.library-window {
    position: absolute;
    left: 6%;
    top: 18%;

    width: 12%;
    height: 29%;

    border: 8px solid #362a29;

    background:
        radial-gradient(
            circle at 60% 26%,
            #d8dbc9 0 8%,
            transparent 9%
        ),
        linear-gradient(
            #142331,
            #081019
        );

    box-shadow:
        0 0 38px rgba(114,157,184,.12);
}

.library-window::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 47%,
            #362a29 47% 53%,
            transparent 53%
        ),
        linear-gradient(
            0deg,
            transparent 47%,
            #362a29 47% 53%,
            transparent 53%
        );
}

.library-shelf {
    position: absolute;
    top: 18%;

    width: 18%;
    height: 43%;

    border: 5px solid #392922;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 23%,
            #5a4030 23% 26%
        ),
        repeating-linear-gradient(
            90deg,
            #693f34 0 8px,
            #3f5b54 8px 16px,
            #84623f 16px 24px,
            #392e45 24px 32px
        );

    box-shadow:
        8px 12px 20px rgba(0,0,0,.42);
}

.library-shelf.left {
    left: 21%;
}

.library-shelf.right {
    right: 4%;
}

.library-portrait {
    position: absolute;
    left: 43%;
    top: 18%;

    width: 10%;
    height: 25%;

    border: 7px solid #806338;

    background:
        radial-gradient(
            ellipse at center 34%,
            #baa082 0 15%,
            transparent 16%
        ),
        linear-gradient(
            #24202c,
            #131018
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.45);
}

.library-desk {
    position: absolute;
    left: 43%;
    bottom: 21%;

    width: 26%;
    height: 18%;

    border-top: 7px solid #74533c;

    background:
        linear-gradient(
            90deg,
            transparent 0 8%,
            #493124 8% 13%,
            transparent 13% 87%,
            #493124 87% 92%,
            transparent 92%
        );
}

.library-desk::before {
    content: "";

    position: absolute;

    left: 31%;
    top: -18px;

    width: 34%;
    height: 12px;

    transform: rotate(-4deg);

    background: #c8ba91;

    border: 1px solid #7d6848;
}

.library-door {
    position: absolute;
    left: 1.5%;
    bottom: 25%;

    width: 9%;
    height: 40%;

    border: 5px solid #392923;

    background:
        linear-gradient(
            90deg,
            #30201c,
            #4c3329,
            #2c1d1a
        );
}

.library-door::after {
    content: "";

    position: absolute;
    right: 12%;
    top: 48%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #cf9f46;
}

.library-hidden-compartment {
    position: absolute;
    right: 25%;
    top: 31%;

    width: 11%;
    height: 18%;

    border: 3px solid #846739;

    background:
        linear-gradient(
            #16151a,
            #08080c
        );

    box-shadow:
        inset 0 0 22px #000,
        0 0 20px rgba(103,209,183,.12);
}

.library-hidden-compartment[hidden] {
    display: none;
}

.library-token-art {
    position: absolute;
    left: 42%;
    top: 30%;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    border: 3px double #e2c587;

    background:
        radial-gradient(
            circle,
            #d9cfb8,
            #9e8b64
        );

    box-shadow:
        0 0 16px rgba(226,197,135,.3);
}

.library-message {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 2%;

    z-index: 70;

    min-height: 24px;

    padding: 8px 12px;

    border:
        1px solid rgba(123,211,187,.25);

    background:
        rgba(7,8,12,.86);

    color:
        #ddd6c7;

    font-size:
        .75rem;
}

.library-hotspot {
    position: absolute;

    z-index: 60;

    border: 1px solid transparent;

    background:
        transparent;

    cursor: pointer;
}

.library-hotspot:hover,
.library-hotspot:focus-visible {
    border-color: #deb55e;

    background:
        rgba(222,181,94,.08);

    outline: none;
}

.library-back-hotspot {
    left: 0;
    bottom: 23%;

    width: 12%;
    height: 44%;
}

.library-desk-hotspot {
    left: 41%;
    bottom: 18%;

    width: 29%;
    height: 25%;
}

.library-shelf-hotspot {
    left: 20%;
    top: 16%;

    width: 20%;
    height: 47%;
}

.library-portrait-hotspot {
    left: 42%;
    top: 16%;

    width: 12%;
    height: 29%;
}

.library-entry-hotspot {
    position: absolute;

    z-index: 80;

    right: 6%;
    top: 25%;

    width: 13%;
    height: 33%;

    border:
        1px solid rgba(109,221,190,.32);

    background:
        rgba(73,183,158,.03);

    cursor: pointer;
}

.library-entry-hotspot[hidden] {
    display: none;
}

.library-entry-hotspot:hover,
.library-entry-hotspot:focus-visible {
    border-color: #77d5b8;
    background: rgba(73,183,158,.08);
}

.torn-ledger-hotspot {
    left: 51%;
    bottom: 28%;

    width: 9%;
    height: 9%;
}

.torn-ledger-hotspot[hidden] {
    display: none;
}

.library-book {
    position: absolute;

    z-index: 64;

    top: 25%;

    width: 3.4%;
    height: 27%;

    border:
        1px solid rgba(255,255,255,.06);

    cursor: pointer;
}

.library-book[hidden] {
    display: none;
}

.library-book[data-book="1"] {
    left: 23%;
    background: #68433b;
}

.library-book[data-book="2"] {
    left: 27%;
    background: #3b6259;
}

.library-book[data-book="3"] {
    left: 31%;
    background: #735d3e;
}

.library-book[data-book="4"] {
    left: 35%;
    background: #493d64;
}

.library-book.correct {
    box-shadow:
        0 0 13px rgba(112,219,188,.55);

    transform:
        translateY(-8px);
}

.library-inventory-item {
    margin: 3px;

    min-height: 36px;

    border:
        1px solid #6a5737;

    background:
        #17131a;

    color:
        #e6decc;

    cursor: pointer;
}

.library-inventory-item.selected {
    border-color:
        #76d8b8;

    color:
        #8de2c7;
}

.library-complete-badge {
    position: absolute;

    right: 2%;
    top: 2%;

    z-index: 90;

    padding: 7px 10px;

    border:
        1px solid #6dd5b5;

    background:
        rgba(12,35,29,.88);

    color:
        #86e1c3;

    font-size:
        .7rem;
}

.library-complete-badge[hidden] {
    display: none;
}

@media (max-width: 620px) {

    .scene-library {
        min-height: 390px;
    }

    .library-message {
        font-size: .68rem;
    }

    .library-entry-hotspot {
        width: 18%;
        right: 2%;
    }

    .library-back-hotspot {
        width: 15%;
    }

}