/* IDK CSS WHAT AM I DOING */

html,
body {
    margin: 10px;
    padding: 0;
    text-align: center;
    font-family: monospace;
    background-color:var(--bg-color);
    color: var(--text-color);
    scroll-behavior: smooth;
    /* background-color: #353535; */
}
:root{
    --bg-color: #2c2a29;
    /* --accent-target: #fff; */
    --accent1: #3d3b3a;
    --accent2: hsl(20, 3%, 20%);
    --text-color: #d1a91a;
    --common-color: #dfdac9;
}
::-webkit-scrollbar {
    width: 5px;
}
  /* Track */
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
  
  /* Handle */
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #2c2a29 80%, white);
    border-radius: 4px;
}
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #2c2a29 50%, white);
}

.page{
    transition: 500ms;
}
body:has(.transferring-page){
    overflow: hidden;
}
.transferring-page{
    transform: translateY(200vh);
}

.header{
    text-align: left;
    /* width:fit-content; */
    margin-bottom: 20px;
    /* display: flex; */
    display: flex;
    h1{
        margin-right: auto;
        cursor: pointer;
    }
}
.header::after{
    content: "";
    position: absolute;
    width: 35%;
    height: 2px;
    background-image: linear-gradient(to right, color-mix(in hsl, var(--text-color) 90%, rgb(255, 0, 0)),color-mix(in hsl, var(--text-color) 90%, rgb(8, 0, 83)));
    /* transform: translateY(-1em); */
    animation: animate_header_width 500ms;
    /* top: 30px; */
    align-self: flex-end;
}
@keyframes animate_header_width{
    0% {
        width: 0;
    }
    100%{
        width:35%;
    }
}

button.settings-button{
    background: transparent;
    /* margin-left: auto; */
    align-self: flex-start;
    color: red;
    transition: 300ms;
    padding: 0;
    > svg{
        transition: 300ms;
        stroke: color-mix(in hsl, var(--accent2) 90%, white);
        > path{
            fill: color-mix(in hsl, var(--accent1) 87%, white);
        }
        > circle{
            fill: var(--bg-color);
        }
    }
}

button.settings-button:hover{
    filter: drop-shadow( 0px 0px 2px #202020);
    > svg{
        transform: rotate(45deg);
        stroke: color-mix(in hsl,var(--accent2) 95%, white);
        > path{
            fill: color-mix(in hsl,var(--accent1) 95%, white);
        }
        > circle{
            fill: color-mix(in hsl,var(--bg-color) 95%, white);
        }
    }
}

button.search-button{
    background: transparent;
    margin-left: auto;
    margin-right: 10px;
    grid-area: title;
    /* align-self: flex-end; */
    color: red;
    transition: 300ms;
    padding: 0.2em;
    > svg{
        transition: 300ms;
        /* stroke: color-mix(in hsl, var(--accent2) 90%, white); */
        > path{
            fill: color-mix(in hsl, var(--bg-color) 90%, black);
        }
        > circle{
            fill: color-mix(in hsl, var(--accent1) 98%, black);
        }
    }
}

button.search-button:hover {
    filter: drop-shadow( 0px 0px 2px #202020);
    > svg {
        transform: rotate(-10deg);
    }
}

.input-search{
    position: absolute;
    display: block;
    height: 2em;
    size: 2em;
    filter: drop-shadow( 0px 0px 2px #202020);
    background-color: color-mix(in hsl, var(--accent1) 50%, var(--accent2));
    /* bottom: -20px; */
    /* top:-50px; */
    right: -30%;
    z-index: 100;
    border-radius: 3px;
    padding: 3px;
}
.input-search > input{
    height: 90%;
    background-color: color-mix(in hsl, var(--accent1) 95%, white);
}

input, button, select{
    background-color: var(--accent1);
    border: none;
    outline: none;
    font-family: monospace;
    padding: 0.1em 0.4em 0.1em 0.4em;
    border-radius:0.4em;
    color: #d2c39e;
}
button:hover{
    cursor:pointer;
}

.inputs-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    grid-template-areas: 
    "inputs inputs inputs inputs" 
    "inputs inputs inputs inputs";
    text-align: left;
    max-width: 1400px;
    margin-left:auto;
    margin-right: auto;
}

.const-build-data{
    width:100%;
    max-width:1400px;
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
    "weapon atree";
    gap: 1rem;
    align-items:left;
    margin-left:auto;
    margin-right: auto;
    margin-top:2rem;
    margin-bottom:2rem;
}
.search-params{
    width:100%;
    max-width:1400px;
    display:grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas: 
    "statreqs searchfor generate";
    gap: 1rem;
    align-items:left;
    margin-left:auto;
    margin-right:auto;
    margin-top:2rem;
    margin-bottom:2rem;
}
@media only screen and (max-width: 40.625rem){
    .inputs-grid{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
        "inputs inputs" 
        "inputs inputs"
        "inputs inputs"
        "inputs inputs";
    }
    .const-build-data{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "weapon"
        "atree";
    }
    .search-params{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
    "statreqs statreqs"
    "searchfor generate";
    }
}

.item-input-wrapper, .weapon-input-wrapper, .atree-input-wrapper, .stat-reqs-wrapper, .build-ord-wrapper{
    width: 100%;
    background-color: var(--accent2);
    border-radius:0.7em;
    align-items: left;
    display:grid;
    position: relative;
    text-align: left;
    transition-duration: 250ms;
}

.item-input-wrapper{
    height:20rem;
    
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 9fr;
    row-gap:0.3rem;
    grid-template-areas: 
    "icon-img title" 
    "inputs inputs";
}

.weapon-input-wrapper{
    height:10rem;
    grid-area: weapon;
    
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 2fr;
    row-gap:0.3rem;
    grid-template-areas: 
    "icon-img title" 
    "inputs inputs";
}
.atree-input-wrapper{
    height:10rem;
    grid-area: atree;
    
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 2fr;
    row-gap:0.3rem;
    grid-template-areas: 
    "icon-img title" 
    "inputs inputs";
}
.stat-reqs-wrapper{
    grid-area: statreqs;
    
    grid-template-rows: fit-content auto;
    row-gap:0.3rem;
    grid-template-areas: 
    "title title" 
    "inputs inputs";
}
.build-ord-wrapper{
    grid-area: searchfor;
    
    grid-template-rows: fit-content auto;
    row-gap:1rem;
    grid-template-areas: 
    "title title" 
    "inputs inputs";

    height: fit-content;
}

.item-input-wrapper > h3, .weapon-input-wrapper > h3, .stat-reqs-wrapper > h3, .build-ord-wrapper > h3, .atree-input-wrapper > h3{
    grid-area: title;
    font-size:large;
    margin-top:auto;
    margin-bottom: auto;
}
.item-input-wrapper > img, .weapon-input-wrapper > img, .atree-input-wrapper > img{
    grid-area: icon-img;
    margin-left:auto;
    margin-right:auto;
    margin-top:4px;
    height: 100%;
    min-height:3em;
}
.atree-input-wrapper > h3{
    grid-area: title;
    height:50%;
}
.stat-reqs-wrapper > h3, .build-ord-wrapper > h3{
    margin-top: 1em;
    margin-bottom: 0em;
    margin-left: 1em;
    height:fit-content;
}
:is(.item-input-wrapper,.weapon-input-wrapper,.atree-input-wrapper,.stat-reqs-wrapper,.build-ord-wrapper):hover{
    box-shadow: 0 0 10px #202020;
}
:is(.item-input-wrapper,.weapon-input-wrapper,.atree-input-wrapper,.stat-reqs-wrapper,.build-ord-wrapper):focus-within{
    box-shadow: 0 0 10px #151515;
}

.weapon-selection-area, .atree-selection-area, .stat-reqs-area, .build-ord-area{
    grid-area: inputs;
    align-content: top;
}
.atree-selection-area{
    padding: 0.5rem;
}
.stat-reqs-area, .build-ord-area{
    min-height: 2rem;
    padding: 0px 8px 8px 8px;
}

.weapon-selection-area > .powder-input{
    width:calc(100% - 10px);
    border-radius: 0.3em;
    font-size:1.4em;
    line-height:1em;
    box-sizing: border-box; 
    z-index: 1;
    margin-left:5px;
    margin-right:5px;
    margin-top:2px;
}

.item-input-list::-webkit-scrollbar-track {
    display:none;
}
.item-input-list::-webkit-scrollbar {
    width:4px;
}
.item-input-list {
    grid-area: inputs;
    height:100%;
    width:inherit;
    align-content: top;
    overflow-y: scroll;
}

.autocomplete-wrapper{
    text-align: left;
    padding: 1px 5px 1px 5px;
    height:fit-content;
    font-size: 1.4em;
    font-family: monospace;
}

input.autocomplete-input, .autocomplete-options > button{
    width: 100%;
    height: 100%;
    text-align: inherit;
    font-family: inherit;
    font-size:inherit;
    box-sizing: border-box; 
    z-index: 2;
    transition-duration: 300ms;
}

.autocomplete-wrapper:has(button) > input{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    anchor-name: --focused-item-input;
}

.autocomplete-options-wrapper{
    /* position: fixed; */
    text-align: inherit;
    height: calc-size(auto);
    z-index: 2;
    /* top: anchor(--focused-item-input bottom);
    left: anchor(--focused-item-input left);
    right: anchor(--focused-item-input right); */
}

:is(.build-ordering-input,.weapon-input,.atree-input,.stat-input) .autocomplete-options-wrapper{
    position: absolute;
    top: anchor(--focused-item-input bottom);
    left: anchor(--focused-item-input left);
    right: anchor(--focused-item-input right);
}

.autocomplete-options{
    /* margin-left:5px;
    margin-right:9px; */
    height: calc-size(auto);
    overflow: hidden;
    width:100%;
    /* transform: translateY(-2px); */
    background-color:var(--accent1);
    border-bottom-left-radius: 0.4em;
    border-bottom-right-radius: 0.4em;
    /* animation: options-fly-out 250ms; */
    transition: height 250ms; 
    @starting-style{
        height:0px;
    }  
}
.autocomplete-options.unfocusing{
    height:0px;
}
.autocomplete-options-wrapper:has(.autocomplete-options > button)::before{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 1.28em + 2px); /* 100% + (1em + 0.1em * 1.4em * 2 + 2px) (input height ~= font-size + padding) */
    transform: translateY(calc(-1.28em - 2px));
    border-radius: 0.4em;
    box-shadow: 0 0 6px #252525;
    pointer-events: none;
    /* background-color:var(--accent1);
    z-index: -2; */
}
.autocomplete-options > button:nth-child(2n + 1){
    background-color: color-mix(in hsl, var(--accent1) 97%, black);
    border-radius: 0;
}
.autocomplete-options > button:last-child{
    border-radius: 0 0 0.4em 0.4em;
}
.autocomplete-options > button:hover, .autocomplete-options > button:focus{
    background-color: color-mix(in hsl, var(--accent1) 97%, white);
}


.Common{
    color:var(--common-color);
}
.Set{
    color:#0f0;
}
.Unique{
    color:yellow;
}
.Rare{
    color:rgb(255, 57, 255);
}
.Legendary{
    color:#00ffff;
}
.Fabled{
    color:#e93e2e;
}
.Mythic{
    color:hsl(300, 100%, 30%);
    font-weight: bolder;
    animation: mythic-glow 1s ease-in-out infinite alternate;
}
@keyframes mythic-glow {
    from {
      text-shadow: none;
    }
    to {
      text-shadow: 0 0 1px hsl(300, 100%, 50%), 0 0 2px hsl(300, 100%, 25%), 0 0 3px hsl(300, 100%, 5%);
    }
}

.stat-input-wrapper, .stat-req, .build-stat, .atree-item-button{
    height: fit-content;
    display:inline-flex;
    align-items: center;
    width:fit-content;  
    background-color: color-mix(in hsl, var(--accent1) 95%, black);
    border-radius: 0.4em;
    border: 3px solid color-mix(in hsl, var(--accent1) 95%, black);
    margin: 2px;
}
.autocomplete-wrapper.stat-input{
    width: 19ch;
    padding: 0px;
    input{
        border-radius: 0.4em 0em 0em 0.4em;
        /* color: var(--common-color); */
    }
}
.stat-input-wrapper > .comparator-wrapper{
    height: inherit;
    width:10px;
}
.stat-input-wrapper > input.num-input, .stat-input-wrapper > button.comparator, .stat-req > div, .atree-item-button > div{
    width: 6ch;
    border-radius: 0em 0.4em 0.4em 0em;
    font-size:1.4em;
    height: 100%;
    line-height: 1em;
    background-color: var(--accent1);
}
.stat-input-wrapper > button.comparator, .stat-req > .stat-comparator{
    width:fit-content;
    font-size:1.6em;
    padding: 0.1em 0.1em 0.1em 0.1em; 
    border-radius: 0em;
    margin-left: 3px;
    margin-right: 3px;
}
.stat-req > .stat-comparator, .stat-input-wrapper > button.comparator{
    color: var(--text-color);
}
.stat-input-wrapper > input.num-input{
    color: var(--common-color);
}
.stat-req,.atree-item-button{
    padding:0;
    transition-duration: 300ms;
    position: relative;
}
.stat-req:hover,.atree-item-button:hover{
    box-shadow: 0 0 4px red;
}
.stat-req::before,.atree-item-button::before{
    content: "x";
    position: absolute;
    font-family: monospace;
    font-size:0.7em;
    font-weight: bolder;
    opacity: 0;
    color:white;
    border-radius: 1em;
    background: radial-gradient(red 40%, transparent 60%);
    aspect-ratio: 1/1;
    height: 1.4em;
    pointer-events: none;
    transition: opacity 300ms;
    text-align: center;
    top:-0.7em;
    right:-0.9em;

}
.stat-req:hover::before,.atree-item-button:hover::before{
    opacity: 1;
}
.stat-req > div{
    padding: 3.5px 4px 3.5px 4px;
}
.stat-req > .stat-type{
    width:fit-content;
    border-radius: 0.4em 0em 0em 0.4em;
}
.stat-req > .stat-value{
    width:fit-content;
    color: var(--common-color)
    /* height: 1.4em; */
}

.atree-item-button > .atree-item{
    width: fit-content;
    padding: 0.2em;
    font-size: 1.2em;
}

.build-ordering-input{
    color:var(--common-color);
}
.neut{
    color:#ffc655;
}
.str{
    color:#00AA00;
}
.dex{
    color:#FFFF55;
}
.int, .stat-type.int{
    color:#55FFFF;
}
.def{
    color:#FF5555;
}
.agi{
    color:lightgray;
}
.gen-button-area{
    padding: 12px;
    height: 4em;
    align-content: top;
}
.gen-button-area > .gen-button-wrapper{
    width:100%;
    height:100%;
    position: relative;
    z-index: 0;
}
.gen-button-wrapper > button{
    color:color-mix(in hsl, var(--text-color), white 10%);
    font-size:2em;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: background-color 300ms;
}
.gen-button-wrapper > button:hover{
    animation: generate-button-glow 1s ease-in-out infinite alternate;
    background-color: color-mix(in hsl, var(--accent1), white 5%)
}
.gen-button-wrapper > button:active{
    background-color: color-mix(in hsl, var(--accent1), white 10%)
}
@property --ang{
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.gen-button-wrapper::after, .gen-button-wrapper::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(from var(--ang) in hsl, color-mix(in hsl, var(--text-color), white 20%), rgba(255, 166, 0, 0.75), rgba(255, 0, 0, 0.5), transparent 75%);
    animation: spin 3s linear infinite reverse;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 3px;
    border-radius: 15px;
    opacity:0;
    transition: opacity 300ms;
}
.gen-button-wrapper:hover::after, .gen-button-wrapper:hover::before{
    opacity: 1;
}
.gen-button-wrapper::before{
    filter:blur(10px);
}
@keyframes spin {
    from {
      --ang: 0deg;
    }
    to {
      --ang: 360deg;
    }
}
.display-builds{
    width:100%;
}
.build-display{
    background-color: var(--accent2);
    border-radius: 8px;
    transition: 500ms;
    color: var(--text-color);

    display: grid;
    grid-template-rows: 0.5fr 1fr 2fr;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "title stats"
    "weapon stats"
    "items items";
    
    gap: 1em;
    margin-bottom: 2rem;
    padding: 1em;
    text-align: left;
    h2{
        margin-left: 0.5em;
        margin-top: 0.5em;
    }
}
.display-builds > a:nth-child(1) > .build-display{
    @starting-style{
        transform: translate(-200vw,0);
    }  
}
.display-builds > a:nth-child(2) > .build-display{
    @starting-style{
        transform: translate(-400vw,0);
    }  
}
.display-builds > a:nth-child(3) > .build-display{
    @starting-style{
        transform: translate(-600vw,0);
    }  
}
.display-builds > a:nth-child(4) > .build-display{
    @starting-style{
        transform: translate(-800vw,0);
    }  
}
.build-display:hover{
    scale: 1.02;
    box-shadow: 0px 0px 10px #161616;
}

.build-weapon{
    grid-area: weapon;
    text-align: left;
    color: var(--text-color);
}

.build-stats{
    margin-top: 2em;
    grid-area: stats;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    h3{
        margin: 0;
        width: 100%;
    }
}

.build-stat{
    font-size: 1.2em;
    gap: 2px;
    width: max-content;
    > .stat-comparator{
        color: var(--text-color);
    }
    > .stat-value{
        color: var(--common-color);
    }
}

.build-items{
    display: grid;
    grid-area: items;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    color: var(--text-color);

    text-align: left;
    gap: 0.5em;
    row-gap: 1em;
    padding-bottom: 8px;
}

.build-item, .build-weapon{
    /* outline: 10px solid var(--accent2); */
    padding-left: 1em;
    background-color: var(--accent1);
    border-radius: 6px;
    height: fit-content;
    overflow-x: hidden;
    border: 4px solid color-mix(in hsl, var(--accent1) 92%, black);
    legend{
        font-size: 1.3em;
    }
    h3{
        font-size: 1.4em;
        margin: 0px;
    }
}
@media only screen and (max-width: 40.625rem){
    .build-display{
        grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "title"
    "items";
    }
    .build-weapon{
        display: none;
    }
    .build-items{
        /* display: none; */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-height: 10em;
        row-gap: 0.1em;
        gap: 0;
        overflow-y: scroll;
    }
    .build-stats{
        /* max-height: 10em;
        overflow-y: scroll; */
        display: none;
    }
    .build-item{
        height: 2.5em;
        overflow: hidden;
    }
}

a:link{
    text-decoration: none;
}