@supports not selector(::-webkit-scrollbar){
    *{
        scrollbar-width: thin;
        scrollbar-color: #0A07 transparent;
    }
    *:hover{scrollbar-color: #0A0 transparent;}
}
::-webkit-scrollbar{
    width:.8rem;
    height:.8rem;
}
::-webkit-scrollbar-thumb:vertical:window-inactive{border-right-style:dashed;}
::-webkit-scrollbar-thumb:horizontal:window-inactive{border-bottom-style:dashed;}
::-webkit-scrollbar-thumb:vertical{
    background-color:transparent;
    border-right:.3rem solid #0A0;
    border-radius:0;
}
:hover::-webkit-scrollbar-thumb:vertical{
    background-color:#000;
    box-shadow:inset .4rem 0 .4rem 0 #0A0;
    border:none;
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
}
::-webkit-scrollbar-thumb:horizontal{
    background-color:transparent;
    border-bottom:.3rem solid #0A0;
    border-radius:0;
}
:hover::-webkit-scrollbar-thumb:horizontal{
    background-color:#000;
    box-shadow:inset 0 .4rem .4rem 0 #0A0;
    border:none;
    border-top-left-radius:1rem;
    border-top-right-radius:1rem;
}
::-webkit-scrollbar-thumb:hover:vertical{box-shadow:inset .4rem 0 .4rem 0 #0F0;}
::-webkit-scrollbar-thumb:hover:horizontal{box-shadow:inset 0 .4rem .4rem 0 #0F0;}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
    display:none;
    background-color:transparent;
}
body{
    background-color: #000;
    color: #0f0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Times New Roman', Times, serif;
    font-size: large;
}
*{user-select: none;}
::selection{
    background-color: #F90;
    color: #000;
}
*:focus,
input#settingsCharAlt:focus+
label[for="settingsCharAlt"]{
    outline: 1px solid #F90;
    outline-offset: -1px;
}
input:not(:disabled):hover,
select:not(:disabled):hover,
input#settingsCharAlt:hover+
label[for="settingsCharAlt"]{
    outline: 1px solid #0A0;
    outline-offset: -1px;
}
input[type="button"],
input[type="checkbox"],
select{cursor: pointer;}
input:disabled,
select:disabled{cursor: not-allowed;}
select{
    background-color: #111;
    color: #0F0;
    border: 2px outset #000;
    border-radius: .4rem;
}
dialog::backdrop{background-color: #0007;}
dialog[open]{
    background-color: #444;
    color: #0F0;
    border-radius: 1rem;
    display: grid;
    gap: .7rem;
    place-items: safe center;
    place-content: safe center;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}
dialog input{
    background-color: #111;
    color: #0F0;
    border-color: #000;
    border-radius: .4rem;
}
dialog fieldset{
    background-color: #222;
    border-color: #222;
    border-radius: .5rem;
    padding: .6rem;
}
dialog#settingsMenu>label{
    background-color: #222;
    border: 2px groove #222;
    border-radius: .5rem;
    padding: .3rem .6rem;
}
dialog h2{margin: 0;}
dialog fieldset>legend{cursor: help;}
div#box{
    position: absolute;
    top: 50%;left: 50%;
    transform:translate(-50%, -50%);
    width: max-content;
    height: max-content;
    padding: 0 .5rem 1rem .5rem;
    max-width: calc(100vw - calc(1rem + 4px));
    max-height: calc(100vh - calc(1rem + 4px));
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    background-color:#222;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 5px 5px 30px -5px #080;
    border: 2px outset #444;
    display: grid;
    gap: 3rem;
    place-items: safe center;
    place-content: safe center;
}
div#box>h1{grid-area: 1/1/2/2;}
span#displayWord{
    grid-area: 2/1/4/2;
    min-width: 20rem;
    max-width: 60rem;
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    user-select: text;
}
span#displayWord>span{
    font-family: consolas, monospace;
    font-size: x-large;
    user-select: text;
    padding: 0 2px;
    word-break: break-all;
}
div#letterButtons{
    grid-area: 4/1/5/2;
    min-width: 20rem;
    max-width: 30rem;
    max-height: 20rem;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    place-items: safe center;
    place-content: safe center;
}
div#letterButtons>input{
    font-family: consolas, monospace;
    font-size: large;
    font-weight: bold;
    background-color: #000;
    border-radius: .5rem;
    color: #0F0;
}
div#letterButtons>input:disabled{
    background-color: #111;
    border-style: inset;
    color: #0A0;
}
span#timer{
    grid-area: 2/2/3/3;
    font-size: larger;
}
span#guesses{
    grid-area: 3/2/4/3;
    font-size: xx-large;
}
div#options{
    grid-area: 4/2/5/3;
    display: flex;
    gap: .5rem;
    flex-direction: column;
}
div#options>input{
    background-color: #111;
    color: #0F0;
    padding: .2rem .5rem;
    border-radius: .4rem;
}
div#settingsWordList,
div#importViewWordList{
    display: flex;
    flex-direction: column;
    min-height: 1rem;
    max-height: 10rem;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    margin: .3rem 0;
}
div#settingsWordList>div>input{float: right;}
div#settingsWordList>div>span,
div#importViewWordList>div>span{
    display: inline-block;
    width: 9rem;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    user-select: text;
}
div#importViewWordList>div>span{white-space: pre;}
input#settingsCharInput,
input#settingsWordInput{width: 10rem;}
label[for="settingsCharAlt"]{
    background-color: #111;
    border: 2px outset #000;
    border-radius: .4rem;
    padding: 0 .3rem;
    color: #0A0;
}
input#settingsCharAlt{
    width: 0;
    margin: 0;
}
input#settingsCharAlt:checked+
label[for="settingsCharAlt"]{
    background-color: #222;
    border-style: inset;
    color: #0F0;
}
div#settingsCharList,
div#importViewCharList{
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-height: 1.5rem;
    max-height: 10rem;
    max-width: 13.5rem;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    margin: .3rem 0;
}
div#settingsCharList>input{
    font-family: consolas, monospace;
    font-size: medium;
}
div#importViewCharList>span{
    background-color: #000;
    border: 2px outset #000;
    border-radius: .4rem;
    font-family: consolas, monospace;
    font-size: medium;
    padding: 0 .3rem;
    user-select: text;
    white-space: pre;
}
div#settingsCharList>input.unhide,
div#importViewCharList>span.unhide{background-color: #333;}
dialog#settingsMenu>h2{grid-area: 1/1/2/3;}
fieldset#settingsChar{grid-area: 2/1/3/2;}
fieldset#settingsWord{grid-area: 2/2/3/3;}
label[for="settingsCharRandomUnhide"]{grid-area: 3/1/4/2;}
input#settingsCharRandomUnhide{width: 2.2rem;}
label[for="settingsMaxFails"]{grid-area: 3/2/4/3;}
input#settingsMaxFails{width: 4rem;}
div#settingsClosing{grid-area: 4/1/5/3;}
dialog#finMenu>h2{grid-area: 1/1/2/2;}
dialog#finMenu>fieldset{
    grid-area: 2/1/3/2;
    line-height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
}
dialog#finMenu>fieldset *:not(legend){user-select: text;}
dialog#finMenu>input{grid-area: 3/1/4/2;}
span#finWord,
span#finWordGuess,
span#finWordIni,
span#finGuesses{
    display: inline-block;
    vertical-align: bottom;
    max-height: 5rem;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    font-size: larger;
    word-break: break-all;
}
span#finWordGuess>span,
span#finWordIni>span,
span#finGuesses>span{padding: 0 2px;}
span#displayWord>span.locked,
span#finWordGuess>span.locked,
span#finWordIni>span.locked{color: #0A0;}
span#displayWord>span.hidden,
span#finWordGuess>span.hidden,
span#finWordIni>span.hidden{color: #040;}
span#finGuesses>span.fail{color: #F44;}
dialog#importMenu>fieldset:first-of-type{background-color: #111;}
fieldset#importDataView>div{
    display: grid;
    gap: .7rem;
    place-items: safe center;
    place-content: safe center;
    grid-template-columns: auto auto;
}
fieldset#importDataView>div>span{
    background-color: #222;
    border: 2px groove #222;
    border-radius: .5rem;
    padding: .3rem .6rem;
}
fieldset#importDataView>div>span:last-of-type{grid-area: 3/1/4/3;}
fieldset#importDataOptions>div{
    display: grid;
    grid-template-columns: auto auto;
    gap: .4rem;
}
dialog#importMenu.blocked>fieldset:not(:first-of-type),
dialog#importMenu.blocked>div>input#importConfirm{filter: brightness(.5) saturate(0);}