/* ==================================================
   DUNGEONS & GAMES - GENERAL STYLING
   ================================================== */


/* ==================================================
   1. ALGEMENE PAGINA
   ================================================== */

:root {
    --floating-menu-height: 100px;
}


html {
    overflow-x: hidden;
}


body {

    font-family:
        Arial, sans-serif;

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

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-attachment:
        fixed;

    background-size:
        100% auto;

    background-color:
        #1a1a1a;

    padding-bottom:
        var(--floating-menu-height);

    overflow-x:
        hidden;

    flex:
        auto;

    flex-direction:
        column;
}


/* ==================================================
   2. ALGEMENE COMPONENTEN
   ================================================== */


/* --------------------------------------------------
   Section titles
   -------------------------------------------------- */

.section-title {

    width:
        100%;

    padding:
        15px 0;

    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;
}


/* --------------------------------------------------
   Credits
   -------------------------------------------------- */

.credits {

    margin-top:
        20px;

    padding:
        10px;

    border:
        2px solid black;

    border-radius:
        15px;

    text-align:
        center;

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

    color:
        white;

    font-size:
        0.9em;
}


.credits-container {

    position:
        fixed;

    bottom:
        20px;

    right:
        20px;

    width:
        25%;

    max-width:
        400px;

    text-align:
        right;

    z-index:
        500;

    padding:
        8px 12px;

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

    color:
        white;

    font-size:
        1em;

    white-space:
        normal;

    overflow-wrap:
        break-word;

    word-break:
        break-word;
}


/* --------------------------------------------------
   Website update notice
   -------------------------------------------------- */

.update-notice {

    font-size:
        0.65em;
}


/* ==================================================
   3. ALGEMENE HOVER-TOOLTIPS
   ================================================== */

.tooltip {

    position:
        relative;

    cursor:
        help;

    text-decoration:
        underline dotted;
}


.tooltip-text {

    visibility:
        hidden;

    opacity:
        0;

    position:
        absolute;

    bottom:
        120%;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        max-content;

    max-width:
        300px;

    padding:
        10px;

    border:
        10px ridge rgba(201, 162, 39, 1);

    background-color:
        rgba(247, 247, 247, 0.95);

    color:
        rgb(0, 0, 0);

    border-radius:
        8px;

    text-align:
        center;

    font-size:
        0.9em;

    line-height:
        1.4;

    white-space:
        normal;

    word-wrap:
        break-word;

    transition:
        opacity 0.2s;

    z-index:
        2000;
}


/* Tooltip arrow */

.tooltip-text::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    left:
        50%;

    transform:
        translateX(-50%);

    border-width:
        6px;

    border-style:
        solid;

    border-color:
        rgba(0, 0, 0, 0.85)
        transparent
        transparent
        transparent;
}


.tooltip:hover .tooltip-text {

    visibility:
        visible;

    opacity:
        1;
}


/* ==================================================
   4. FLOATING MENU
   ================================================== */

.floating-menu {

    position:
        fixed;

    bottom:
        20px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        row;

    gap:
        clamp(5px, 2vw, 50px);

    z-index:
        500;

    max-width:
        calc(100% - 140px);

    flex-wrap:
        wrap;
}


.floating-menu button {

    width:
        clamp(45px, 5vw, 80px);

    height:
        clamp(45px, 5vw, 80px);

    border:
        2px solid black;

    border-radius:
        50%;

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

    color:
        white;

    font-weight:
        bold;

    cursor:
        pointer;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


/* --------------------------------------------------
   Floating menu buttons with image
   -------------------------------------------------- */

.floating-menu button.has-image {

    border:
        none;

    background-size:
        contain;

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-color:
        transparent;
}


.floating-menu button:hover {

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

    color:
        black;

    text-shadow:
        2px 0 white,
        -2px 0 white,
        0 2px white,
        0 -2px white,
        2px 2px white,
        -2px -2px white,
        2px -2px white,
        -2px 2px white;
}


/* ==================================================
   5. PROGRESSION - HOOFDSTRUCTUUR
   ================================================== */

.progression {

    display:
        flex;

    width:
        100%;

    align-items:
        stretch;
}


.tiers {

    flex:
        5;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.progression-info-panel {

    flex:
        3;

    flex-shrink:
        0;

    padding-left:
        15px;

    background-color:
        rgba(247, 247, 247, 0.95);

    align-self:
        flex-start;

    box-sizing:
        border-box;

    font-size:
        0.85em;
}


/* ==================================================
   5A. LOOT TABLE - VOLLEDIGE BREEDTE ONDER PROGRESSION
   ================================================== */

#loot-table-container {

    width:
        100%;

    max-width:
        100%;

    display:
        block;

    box-sizing:
        border-box;

    clear:
        both;
}


/* ==================================================
   6. PROGRESSION - GRID
   ================================================== */

.progression-grid {

    display:
        grid;

    grid-template-columns:
        50px
        70px
        120px
        120px
        120px
        80px
        minmax(200px, 1fr);

    grid-template-rows:
        auto
        repeat(
            var(--progression-rows, 8),
            minmax(40px, auto)
        );

    grid-auto-flow:
        row;
}


@media (max-width: 1400px) {

    .progression-grid {

        grid-template-columns:
            50px
            50px
            80px
            90px
            90px
            60px
            minmax(160px, 1fr);

        grid-auto-flow:
            row;
    }

}


/* ==================================================
   7. PROGRESSION - CELLEN EN TEKST
   ================================================== */

.cell {

    border:
        1px solid black;

    padding:
        5px;

    justify-content:
        center;

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    overflow-wrap:
        normal;

    word-break:
        normal;
}


.info {

    display:
        flex;

    flex-direction:
        column;

    text-align:
        left;

    padding:
        1px;
}


.info h3 {

    display:
        block;

    text-align:
        center;

    margin-bottom:
        1px;
}


.info p {

    text-align:
        center;

    max-width:
        95%;

    margin:
        5px auto;
}


.header {

    min-height:
        40px;

    font-weight:
        bold;

    text-align:
        center;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow-wrap:
        break-word;

    min-width:
        0;

    word-break:
        normal;

    background-color:
        black;

    color:
        white;
}


.loot-item.progression-item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

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

    line-height:
        1.1;
}


/* ==================================================
   8. TIER-KLEUREN
   ================================================== */


/* --------------------------------------------------
   2014
   -------------------------------------------------- */

body[data-version="dnd2014"] .tier-d {

    background-color:
        rgba(226, 239, 218, 0.95);
}


body[data-version="dnd2014"] .tier-c {

    background-color:
        rgba(201, 218, 248, 0.95);
}


body[data-version="dnd2014"] .tier-b {

    background-color:
        rgba(255, 242, 204, 0.95);
}


body[data-version="dnd2014"] .tier-a {

    background-color:
        rgba(244, 204, 204, 0.95);
}


body[data-version="dnd2014"] .tier-s {

    background-color:
        rgba(217, 217, 217, 0.95);
}


/* --------------------------------------------------
   2024
   -------------------------------------------------- */

body[data-version="dnd2024"] .tier-d {

    background-color:
        rgba(222, 211, 184, 0.95);
}


body[data-version="dnd2024"] .tier-c {

    background-color:
        rgba(183, 214, 207, 0.95);
}


body[data-version="dnd2024"] .tier-b {

    background-color:
        rgba(210, 196, 226, 0.95);
}


body[data-version="dnd2024"] .tier-a {

    background-color:
        rgba(231, 190, 166, 0.95);
}


body[data-version="dnd2024"] .tier-s {

    background-color:
        rgba(232, 207, 145, 0.95);
}


/* --------------------------------------------------
   LOOT TABLE KLEUREN
   -------------------------------------------------- */


/* 2014 */

body[data-version="dnd2014"] {

    --tier-d-loot-color:
        rgba(158, 191, 135, 0.5);

    --tier-c-loot-color:
        rgba(149, 186, 255, 0.5);

    --tier-b-loot-color:
        rgba(249, 218, 128, 0.5);

    --tier-a-loot-color:
        rgba(205, 140, 140, 0.5);

    --tier-s-loot-color:
        rgba(171, 171, 171, 0.5);
}


/* 2024 */

body[data-version="dnd2024"] {

    --tier-d-loot-color:
        rgba(190, 175, 140, 0.5);

    --tier-c-loot-color:
        rgba(145, 180, 170, 0.5);

    --tier-b-loot-color:
        rgba(175, 155, 195, 0.5);

    --tier-a-loot-color:
        rgba(195, 150, 125, 0.5);

    --tier-s-loot-color:
        rgba(195, 170, 105, 0.5);
}


/* --------------------------------------------------
   LOOT DESCRIPTION
   -------------------------------------------------- */


/* 2014 */

body[data-version="dnd2014"] .loot-description {

    background-color:
        rgba(158, 191, 135, 0.5);
}


/* 2024 */

body[data-version="dnd2024"] .loot-description {

    background-color:
        rgba(190, 175, 140, 0.5);
}


/* ==================================================
   9. PROGRESSION - STAMPS
   ================================================== */

.stamp {

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


/* ==================================================
   10. PROGRESSION - UNLOCKS
   ================================================== */

.unlock {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


.unlock-choice-cell {

    padding:
        0;

    border:
        2px solid red;
}


.unlock-group {

    flex:
        1;

    min-width:
        0;

    border-left:
        2px solid red;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    height:
        100%;
}


.unlock-group:first-child {

    border-left:
        none;
}


.unlock-subchoice {

    flex:
        1;

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


.unlock-subchoice + .unlock-subchoice {

    border-top:
        2px solid red;
}


/* ==================================================
   11. PROGRESSION - LEVELS
   ================================================== */

.level {

    justify-content:
        center;

    text-align:
        center;
}


/* ==================================================
   12. PROGRESSION - HEALING
   ================================================== */

.healing {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;
}


.healing-item {

    width:
        100%;
}


/* ==================================================
   13. PROGRESSION - ARMOR
   ================================================== */

.armor-starting {

    justify-content:
        center;

    text-align:
        center;

    font-weight:
        bold;
}


.armor {

    justify-content:
        center;

    align-items:
        center;

    flex-direction:
        column;

    text-align:
        center;
}


.armor-category {

    display:
        flex;

    flex-direction:
        column;
}


/* ==================================================
   14. PROGRESSION - MOUNTS
   ================================================== */

.mount {

    justify-content:
        center;

    align-items:
        center;

    flex-direction:
        column;

    text-align:
        center;
}


.mount-category {

    display:
        flex;

    flex-direction:
        column;
}


/* ==================================================
   15. PROGRESSION - WEAVE
   ================================================== */

.weave {

    justify-content:
        center;

    text-align:
        center;
}


.weave-value strong {

    font-size:
        1em;

    display:
        flex;

    flex-direction:
        column;

    text-align:
        center;
}


/* ==================================================
   16. EPIC BOONS
   ================================================== */

#boon-table {

    margin-top:
        40px;
}


.boon-dashboard {

    display:
        grid;

    grid-template-columns:
        repeat(auto-fit, minmax(350px, 1fr));

    gap:
        5px;
}


.boon-card {

    padding:
        15px;

    background-color:
        rgba(251, 188, 4, 0.95);

    border:
        2px solid black;

    border-radius:
        10px;

    text-align:
        center;
}


.boon-card h3 {

    margin:
        0 0 10px 0;

    font-size:
        1.1em;

    color:
        rgba(153, 0, 51, 1);
}


.boon-card p {

    margin:
        0;

    line-height:
        1.3;
}


/* ==================================================
   17. RESPONSIVE - TABLET / MOBIEL
   ================================================== */

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


    /* --------------------------------------------------
       Progression
       -------------------------------------------------- */

    .progression {

        flex-direction:
            column;
    }


    .tiers {

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .progression-info-panel {

        width:
            100%;

        flex:
            none;

        padding:
            15px;
    }


    /* --------------------------------------------------
       Floating menu
       -------------------------------------------------- */

    .floating-menu {

        flex-wrap:
            nowrap;

        gap:
            clamp(3px, 1.2vw, 10px);

        max-width:
            calc(100% - 20px - 40px);

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .floating-menu button {

        width:
            clamp(34px, 9vw, 55px);

        height:
            clamp(34px, 9vw, 55px);

        font-size:
            clamp(0.45rem, 2vw, 0.65rem);

        line-height:
            1.05;

        padding:
            2px;

        flex-shrink:
            0;

        top:
            max(20px, env(safe-area-inset-top));

        right:
            max(20px, env(safe-area-inset-right));

        bottom:
            max(20px, env(safe-area-inset-bottom));

        left:
            max(20px, env(safe-area-inset-left));
    }


    /* --------------------------------------------------
       Body
       -------------------------------------------------- */

    body {

        padding-bottom:
            calc(
                20px +
                clamp(34px, 9vw, 55px) +
                20px
            );
    }


    /* --------------------------------------------------
       Credits
       -------------------------------------------------- */

    .credits-container {

        position:
            fixed;

        visibility:
            hidden;
    }


    /* --------------------------------------------------
       Tier width
       -------------------------------------------------- */

    .tier {

        min-width:
            800px;
    }

}


/* ==================================================
   18. RESPONSIVE - PROGRESSION PORTRAIT
   ================================================== */

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

    .progression {

        flex-direction:
            column;
    }


    .tiers {

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .progression-info-panel {

        width:
            100%;

        flex:
            none;

        padding:
            15px;
    }


    .progression-grid {

        grid-template-columns:
            50px
            50px
            80px
            90px
            90px
            60px
            minmax(360px, 1fr);
    }

}