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


/* ==================================================
   1. LOOT TABLE - TITEL
   ================================================== */

#loot-table .loot-title {

    width:
        100%;

    padding:
        15px 0;

    margin-top:
        20px;

    border:
        2px solid black;

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

    color:
        white;

    font-size:
        2em;

    font-weight:
        bold;

    text-align:
        center;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


/* ==================================================
   2. LOOT TIER - ALGEMENE LAYOUT
   ================================================== */

.loot-tier {

    display:
        flex;

    gap:
        15px;

    width:
        100%;

    align-items:
        flex-start;
}


.loot-tier-content {

    flex:
        1;

    min-width:
        0;
}


.loot-layout {

    display:
        flex;

    gap:
        15px;

    align-items:
        stretch;
}


/* ==================================================
   3. LOOT GRID
   ================================================== */

.loot-grid {

    flex:
        1;

    min-width:
        0;

    display:
        grid;
}


.loot-grid .cell {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        8px;

    border:
        1px solid black;

    text-align:
        center;
}


/* ==================================================
   4. ROLL-NUMMERS
   ================================================== */

.loot-roll {

    text-align:
        center;

    background-color:
        rgba(0, 0, 0, 0.12);
}


/* ==================================================
   5. LOOT ITEMS
   ================================================== */

.loot-item {

    font-weight:
        600;

    font-size:
        clamp(0.50rem, 0.65vw, 0.90rem);

    line-height:
        1.1;
}


/* ==================================================
   6. LOOT INFO HEADER
   ================================================== */

.loot-info-header {

    display:
        grid;

    grid-template-columns:
        1fr 1fr 2fr;

    width:
        100%;
}


.loot-info-header > div {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        10px;

    border:
        1px solid black;

    text-align:
        center;

    min-width:
        0;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


.loot-info-header div:last-child {

    border-right:
        none;
}


.tier-name {

    font-size:
        1.1rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-align:
        center;
}


.attunement {

    font-style:
        italic;

    font-weight:
        300;
}


/* ==================================================
   7. LOOT INFO PANEL
   ================================================== */

.loot-info-panel {

    width:
        15%;

    min-width:
        250px;

    flex-shrink:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    overflow:
        visible;
}


.loot-tier-info {

    flex:
        1;

    padding:
        15px;

    border:
        2px solid black;

    text-align:
        center;

    overflow:
        visible;
}


.loot-tier-info:empty {

    visibility:
        hidden;
}


.loot-tier-info h3 {

    font-size:
        clamp(0.9rem, 1.2vw, 1.2rem);
}


.loot-tier-info li {

    font-size:
        clamp(0.75rem, 1vw, 1rem);
}


.loot-tier-info ul {

    padding:
        0;

    list-style:
        none;
}


/* ==================================================
   8. LOOT INFO FOOTER
   ================================================== */

.loot-info-footer {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    width:
        100%;

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

    color:
        white;
}


.loot-info-footer > div {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        10px;

    border:
        1px solid black;

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

    color:
        white;

    text-align:
        center;
}


.loot-info-footer.centered {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


/* ==================================================
   9. LOOT DESCRIPTION
   ================================================== */

.loot-description {

    padding:
        10px;

    border:
        1px solid black;

    font-size:
        1.5em;

    text-align:
        center;
}


.loot-description-small {

    font-size:
        0.7em;

    font-weight:
        normal;
}


/* ==================================================
   10. TIER-KLEUREN
   ================================================== */

/*
   De daadwerkelijke kleuren worden bepaald
   door style.css op basis van data-version.

   Deze selectors gebruiken alleen de
   bijbehorende loot-kleurvariabelen.
*/


.tier-d .loot-tier-info {

    background-color:
        var(--tier-d-loot-color);
}


.tier-c .loot-tier-info {

    background-color:
        var(--tier-c-loot-color);
}


.tier-b .loot-tier-info {

    background-color:
        var(--tier-b-loot-color);
}


.tier-a .loot-tier-info {

    background-color:
        var(--tier-a-loot-color);
}


.tier-s .loot-tier-info {

    background-color:
        var(--tier-s-loot-color);
}


/* ==================================================
   11. ATTUNEMENT - TIER KLEUREN
   ================================================== */

.tier-d .attunement {

    background-color:
        var(--tier-d-loot-color);
}


.tier-c .attunement {

    background-color:
        var(--tier-c-loot-color);
}


.tier-b .attunement {

    background-color:
        var(--tier-b-loot-color);
}


.tier-a .attunement {

    background-color:
        var(--tier-a-loot-color);
}


.tier-s .attunement {

    background-color:
        var(--tier-s-loot-color);
}


/* ==================================================
   12. UITGESLOTEN ITEMS
   ================================================== */

.excluded::after {

    content:
        "\26D2";

    margin-left:
        6px;
}


.excluded::after,
.excluded-symbol {

    margin:
        2px;

    color:
        red;

    font-weight:
        100;
}


/* ==================================================
   13. MOBIEL - PORTRAIT
   ================================================== */

@media (max-width: 768px) and (orientation: portrait) {

    /* ------------------------------------------
       Algemene layout
       ------------------------------------------ */

    .loot-layout {

        flex-direction:
            column;
    }


    .loot-grid {

        width:
            100%;
    }


    /* ------------------------------------------
       Roll-nummers
       ------------------------------------------ */

    .loot-grid .loot-roll {

        grid-column:
            1 / -1;
    }


    /* ------------------------------------------
       Items
       ------------------------------------------ */

    .loot-grid .loot-item {

        min-width:
            0;

        padding:
            8px 5px;
    }


    /* ------------------------------------------
       Info-panel
       ------------------------------------------ */

    .loot-info-panel {

        width:
            100%;

        min-width:
            0;
    }


    /* ------------------------------------------
       Header
       ------------------------------------------ */

    .loot-info-header {

        grid-template-columns:
            1fr;
    }


    .loot-info-header > div {

        min-width:
            0;

        width:
            100%;

        box-sizing:
            border-box;
    }


    .loot-info-header div:last-child {

        border-right:
            1px solid black;
    }


    /* ------------------------------------------
       Footer
       ------------------------------------------ */

    .loot-info-footer {

        grid-template-columns:
            1fr;
    }

}


/* ==================================================
   14. MOBIEL - LANDSCAPE
   ================================================== */

@media (max-width: 768px) and (orientation: landscape) {

    /* ------------------------------------------
       Layout
       ------------------------------------------ */

    .loot-layout {

        flex-direction:
            column;
    }


    /* ------------------------------------------
       Loot grid
       ------------------------------------------ */

    .loot-grid {

        width:
            100%;

        min-width:
            0;

        overflow-x:
            auto;

        overflow-y:
            hidden;
    }


    /* ------------------------------------------
       Info panel
       ------------------------------------------ */

    .loot-info-panel {

        width:
            100%;

        min-width:
            0;
    }


    /* ------------------------------------------
       Header
       ------------------------------------------ */

    .loot-info-header {

        grid-template-columns:
            1fr;
    }


    .loot-info-header > div {

        min-width:
            0;

        width:
            100%;

        box-sizing:
            border-box;
    }


    .loot-info-header div:last-child {

        border-right:
            1px solid black;
    }

}