/* ==================================================
   DUNGEONS & GAMES - LOOT TOOLTIPS
   ================================================== */


/* ==================================================
   1. TOOLTIP ANCHOR & TOGGLE
   ================================================== */

/*
   Loot items vormen het positioneringspunt voor
   de absolute tooltip.
*/

.loot-item {

    position:
        relative;
}


/* --------------------------------------------------
   Tooltip cursor
   -------------------------------------------------- */

.item-tooltips-enabled .loot-item {

    cursor:
        default;
}


.item-tooltips-disabled .loot-item {

    cursor:
        default;
}


/* --------------------------------------------------
   Tooltip zichtbaar bij hover
   -------------------------------------------------- */

.item-tooltips-enabled .loot-item:hover .item-description {

    opacity:
        1;

    visibility:
        visible;

    box-shadow:
        0 0 150px rgba(255, 215, 0, 4);
}


/* ==================================================
   2. BASIS TOOLTIP
   ================================================== */

.item-description {

    position:
        absolute;

    width:
        clamp(240px, 18vw, 360px);

    max-width:
        calc(100vw - 40px);

    min-height:
        0;

    height:
        auto;

    box-sizing:
        border-box;

    background-color:
        rgb(17, 17, 17);

    color:
        rgba(255, 255, 255, 1);

    font-weight:
        400;

    font-size:
        clamp(0.8rem, 0.9vw, 1rem);

    border:
        2px ridge rgba(255, 215, 0, 1);

    border-radius:
        10px;

    padding:
        clamp(10px, 1vw, 18px);

    left:
        100%;

    top:
        0;

    margin-left:
        30px;

    z-index:
        1000;

    box-shadow:
        0 0 100px rgba(255, 215, 0, 0.1);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 1s ease,
        box-shadow 5s ease;

    pointer-events:
        none;
}


/* ==================================================
   3. PARCHMENT STYLING
   ================================================== */


/* --------------------------------------------------
   Parchment - tekst
   -------------------------------------------------- */

.item-description.parchment {

    color:
        #3a2615;

    font-weight:
        400;
}


/* --------------------------------------------------
   Parchment - achtergrond
   -------------------------------------------------- */

.item-description.parchment::before {

    content:
        "";

    position:
        absolute;

    inset:
        -25px;

    background-image:
        url("/images/parchment.webp");

    background-size:
        100% 100%;

    background-repeat:
        no-repeat;

    z-index:
        -1;

    filter:
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.15));
}


/* --------------------------------------------------
   Parchment - metadata
   -------------------------------------------------- */

.item-description.parchment .item-meta {

    border-bottom:
        1px solid rgba(80, 40, 10, 0.5);
}


/* ==================================================
   4. TOOLTIP CONTENT
   ================================================== */


/* --------------------------------------------------
   Headings
   -------------------------------------------------- */

.item-description h3 {

    margin-top:
        0;
}


/* --------------------------------------------------
   Lists
   -------------------------------------------------- */

.item-description ul {

    padding-left:
        20px;
}


/* --------------------------------------------------
   Description text
   -------------------------------------------------- */

.item-description-text {

    margin-bottom:
        15px;
}


.item-description-text p {

    margin:
        0 0 10px 0;
}


/* --------------------------------------------------
   Source note
   -------------------------------------------------- */

.item-source-note {

    margin-top:
        10px;

    padding-top:
        10px;

    border-top:
        1px solid #777;

    font-size:
        0.75rem;

    font-style:
        italic;
}


/* ==================================================
   5. TOOLTIP TOGGLE BUTTON
   ================================================== */

.settings-container {

    position:
        fixed;

    bottom:
        clamp(10px, 1.5vw, 20px);

    left:
        clamp(10px, 1.5vw, 20px);

    z-index:
        1000;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 1s ease;
}


.settings-container.visible {

    opacity:
        1;

    visibility:
        visible;
}


/* --------------------------------------------------
   Toggle button
   -------------------------------------------------- */

#toggle-item-tooltips {

    width:
        clamp(45px, 4vw, 70px);

    height:
        clamp(45px, 4vw, 70px);

    border-radius:
        50%;

    border:
        2px solid black;

    background-color:
        rgba(0, 0, 0, 0.7);

    color:
        white;

    font-weight:
        bold;

    font-size:
        clamp(0.40rem, 0.6vw, 0.8rem);

    line-height:
        1.1;

    padding:
        5px;
}


#toggle-item-tooltips.tooltip-on-mode {

    background-color:
        rgba(55, 55, 35, 0.95);

    border-color:
        rgba(218, 165, 32, 1);

    color:
        rgba(240, 217, 138, 1);

}


/* --------------------------------------------------
   Parchment mode
   -------------------------------------------------- */

#toggle-item-tooltips.parchment-mode {

    background-color:
        rgba(90, 55, 25, 0.9);

    border-color:
        rgba(255, 215, 0, 1);

    color:
        rgba(245, 215, 110, 1);
}


/* ==================================================
   6. MOBIELE TOOLTIP
   ================================================== */

@media (max-width: 900px),
       (max-height: 500px) and (orientation: landscape) {

    .item-description.mobile-open {

        opacity:
            1;

        visibility:
            visible;

        position:
            fixed;

        top:
            50%;

        left:
            50%;

        width:
            calc(100vw - 40px);

        max-width:
            500px;

        height:
            auto;

        max-height:
            calc(100dvh - 40px);

        margin:
            0;

        overflow-y:
            auto;

        transform:
            translate(-50%, -50%);

        z-index:
            5000;
    }

}


/* ==================================================
   7. MOBIELE TOOLTIP OVERLAY
   ================================================== */

.tooltip-overlay {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(0, 0, 0, 0.65);

    z-index:
        4999;
}