:root {
    --gold: #ffec80;
    --text-primary: #0a0909;
    --text-secondary: #382a1d;
    --text-footer: #fca13a;
    --wynn-primary: #81644B;
    --wynn-primary-light: #A58972;
    --wynn-primary-dark: #221111;
    --wynn-secondary: #CCA76F;
    --wynn-secondary-select: #E3CFB0;
    --wynn-secondary-button: #dbbc8d;
    --wynn-secondary-light: #BC865B;
    --wynn-secondary-dark: #20170f;
    --wynn-item-primary: #120311;
    --wynn-item-border: #24015B;
    --warze: #ff2323;
    --green: #5f5;
    --red: #f55;
    --yellow: #ff5;
    --aqua: #5ff;
    --gray: #777;
    --select: #27271f;
    --wynn-builder: #4e9ad8;
}
@font-face {
    font-family: Faithful;
    src: url('./fonts/mineglyph-faithful.ttf'); 
}
body {
    background-image: url('./images/background.webp');
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    text-align: center;
    color: var(--text-primary);
    font-family: Faithful, sans-serif;
    margin: 0;
    padding: 0;
    user-select: none;
}
#scroller {
    height: 100vh;
    overflow-y: scroll;
}
button {
    background-color: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-family: Faithful, sans-serif;
    box-shadow:
    4px 0px 0px var(--wynn-secondary-dark),
    -4px 0px 0px var(--wynn-secondary-dark),
    0px 4px 0px var(--wynn-secondary-dark),
    0px -4px 0px var(--wynn-secondary-dark);
}
button.selected {
    background-color: var(--wynn-secondary-select);
    opacity: 1;
    filter: grayscale(0);
}
hr {
    border: none;
    height: 4px;
    background-color: var(--wynn-primary-light);
    margin-inline: 12px;
}
img {
    image-rendering: pixelated;
    pointer-events: none;
}
h1, h2, summary {
    margin: 0;
    color: var(--text-primary);
}
summary {
    font-size: 24px;
    cursor: pointer;
}
input, select {
    background-color: var(--wynn-secondary-select);
    color: var(--text-primary);
    border: none;
    padding: 2px;
    padding-left: 8px;
    font-family: Faithful, sans-serif;
}
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 200px;
    background: var(--wynn-secondary-light);
    outline: none;
    padding-left: 2px;
    box-shadow:
    4px 0px 0px var(--wynn-secondary-dark),
    -4px 0px 0px var(--wynn-secondary-dark),
    0px 4px 0px var(--wynn-secondary-dark),
    0px -4px 0px var(--wynn-secondary-dark);

    &:hover {
        opacity: 1;
    }

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: var(--gold);
        cursor: pointer;
    }

    &::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: var(--gold);
        cursor: pointer;
        border: 1px solid var(--wynn-secondary);
        border-radius: 0px;
    }
}
input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

#title {
    color: var(--gold);
    text-shadow: 4px 4px black;
    margin: 20px;
}

main {
    margin: 8px auto;
    padding: 8px;
    background-color: var(--wynn-primary);
    border-top: 4px solid var(--wynn-primary-light);
    box-shadow:
    0px 4px 0px var(--wynn-primary-dark),
    4px 0px 0px var(--wynn-primary-dark),
    -4px 0px 0px var(--wynn-primary-dark),
    0px -4px 0px var(--wynn-primary-dark);
    
    max-width: 600px;
    text-align: center;

    button {
        border: none;
        border-top: 4px solid #BC865B;
        padding-bottom: 4px;
        margin-inline: 2px;
        cursor: pointer;
        background-color: var(--wynn-secondary);
    }

    #profession {
        img {
            width: 48px;
            filter: drop-shadow(2px 2px #0004);
        }

        button:hover {
            background-color: var(--wynn-secondary-select);
        }

        #professionContainer {
            margin-bottom: 8px;

            button {
                margin-bottom: 4px;
            }
        }

        .recipeTypeContainer {
            button {
                font-size: 24px;
                text-transform: capitalize;
                margin-bottom: 4px;
            }
        }
    }

    #materialQuality {
        .materialQualityTierContainer {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-inline: 4px;
        }

        button img {
            width: 32px;
        }
    }

    #recipeLevelContainer {
        display: flex;
        justify-content: center;
        align-items: center;

        #recipeLevelText {
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    }

    #scoringItems, #limitItems, #bannedIngItems {
        border-top: 4px solid var(--wynn-secondary-light);
        margin-top: 8px;
        min-height: 8px;
        padding-bottom: 4px;
        background-color: var(--wynn-secondary);
        box-shadow:
        0px 4px 0px var(--wynn-primary-dark),
        4px 0px 0px var(--wynn-primary-dark),
        -4px 0px 0px var(--wynn-primary-dark),
        0px -4px 0px var(--wynn-primary-dark);

        .scoringItemContainer {
            .scoringItem {
                display: flex;
                justify-content: space-between;
                margin: 4px;
                padding-left: 4px;
                background-color: var(--wynn-secondary);

                input {
                    max-width: 70px;
                }

                .scoringItemRight {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                button {
                    border: none;
                    box-shadow: none;
                    padding-inline: 8px;
                    display: inline-block;
                    background-color: var(--wynn-secondary-button);

                    &:hover {
                        background-color: var(--wynn-secondary-select);
                    }
                }
            }

            .customLimitContainer {
                display: flex;
                padding-inline: 4px;
                justify-content: space-between;
                flex-wrap: wrap;
            }
        }

        .limitItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 4px;
            padding-left: 4px;
            background-color: var(--wynn-secondary);
            text-align: left;

            input {
                max-width: 70px;
            }
        }

        .bannedIngItem {
            text-align: left;
            margin: 4px;
            padding: 4px 8px;
            cursor: pointer;
            display: inline-block;
            border-radius: 4px;
            background-color: var(--wynn-secondary-button);

            &:hover {
                background-color: var(--wynn-secondary-select);
            }

            &.disabled {
                background-color: var(--red);
                text-decoration: line-through;
                color: var(--text-secondary)
            }

            span {
                pointer-events: none;
            }
        }
    }

    #startButton {
        font-size: 24px;
        width: 200px;
        
        &:hover {
            background-color: var(--wynn-secondary-select);
        }
    }
    
    #recipeResult {
        margin-top: 12px;
        color: var(--red);

        span {
            color: #999;
        }

        .material {
            color: var(--gold);
        }
        .ingredients {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, auto);
            gap: 4px;
            margin: 8px;

            .ingredient {
                border: 4px solid var(--wynn-item-border);
                padding: 10px;
                color: white;
                text-align: center;
                font-size: 18px;
                text-decoration: none;

                &.noIngredient {
                    color: #999;
                }
            }              
        }
        .stats {
            text-align: left;

            p {
                margin: 4px;
            }
        }
        .wynnBuilderLink {
            color: var(--wynn-builder);
            font-size: 24px;
            display: block;
            text-align: center;
            margin-block: 12px;
        }
    }

    #advanced {
        .advancedOption {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
        p {
            margin: 0;
            color: var(--text-secondary);

            span {
                color: var(--text-primary);
            }
        }
    }

    .materialPreview {
        display: inline-block;
        width: 36px;
        height: 36px;
        position: relative;
        margin-right: 6px;
        cursor: help;

        .materialPreviewBackground {
            width: 36px;
            height: 36px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .materialPreviewItem {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 2px;
            left: 2px;
        }

        .materialPreviewCount {
            position: absolute;
            bottom: -2px;
            right: 0px;
            color: white !important;
            text-shadow: 2px 2px #3F3F3F;
        }
    }
}

footer {
    color: var(--gold);
    text-shadow: 2px 2px black;
    background: linear-gradient(#20170f00, #20170f88 40%);
    padding-block: 40px 120px;
    margin-top: 120px;

    a {
        color: var(--warze);
        text-decoration: none;
    }

    span {
        color: var(--text-footer)
    }
}

.red {
    color: var(--red) !important;
}
.green {
    color: var(--green) !important;
}
.yellow {
    color: var(--yellow) !important;
}
.aqua {
    color: var(--aqua) !important;
}
.gray {
    color: var(--gray) !important;
}

.itemBox {
    background-color: var(--wynn-item-primary);
    border: 4px solid var(--wynn-item-border);
    border-radius: 4px;
    outline: 4px solid var(--wynn-item-primary);
    padding: 4px;
}

#tooltip {
    position: fixed;
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    top: 0;
    left: 0;
    color: white;
    pointer-events: none;
}