* {
    box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

:root {
	--letter-count: 0;
	--true-vh: 100vh;
	--cell-font-size: 20px;
}

:root {
    --pink-3: hsl(338deg 56% 51%);
    --pink-4: hsl(338deg 56% 37%);
    --pink-6: hsl(338deg 75% 10%);

    --green-3: hsl(150deg 94% 27%);
    --green-5: hsl(150deg 94% 13%);
    --green-6: hsl(150deg 94% 05%);

    --gray-5: hsl(0deg 0% 13%);

    --text-color: white;

    --background: black;
    --board-second-color: hsl(336deg 60% 5%);

	--drawer-body-loss: #16030A;
    --drawer-body-win: #01130A;

	--reverse-text-color: white;

    --match-color: #068445;
    --tentative-color: #C94072;
    --incorrect-color: #222222;

    --match-background: #068445;
    --match-borderColor: #068445;
    --match-textColor: white;

    --tentative-background: #C94072;
    --tentative-borderColor: #C94072;
    --tentative-textColor: white;

    --incorrect-background: #222222;
    --incorrect-borderColor: #222222;
    --incorrect-textColor: white;

	--result-body-win: var(--match-color);
	--result-body-loss: var(--pink-4);
	--drawer-body: var(--drawer-color);

	--bar-color: rgb(255 255 255 / 7%);
	--bar-background-color: rgb(255 255 255 / 30%);

    --keyboard-gap: 10px;
    --keyboard-padding: 30px;
    --keyboard-height: 300px;
    --keyboard-background: rgb(28,28,30);
    --keyboard-key-background: rgb(142,142,147);
    --keyboard-special-key-background: rgb(99,99,102);

}

header svg path {fill: var(--text-color)!important;}

header svg circle {fill: var(--background)!important; transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);}

button {
	background: transparent;
	border: 0 solid transparent;
}

.cell.match {
    background: var(--match-color);
    border-color: var(--match-color);
    color: var(--match-textColor);
}

.cell.tentative {
    background: var(--tentative-color);
    border-color: var(--tentative-color);
    color: var(--tentative-textColor);
}

.cell.incorrect {
    background: var(--incorrect-color);
    border-color: var(--incorrect-color);
    color: var(--incorrect-textColor);
}

html {
    background: var(--background);
    font-family: "Roboto", sans-serif;
    font-size: 62.5%;
	user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    height: var(--true-vh);
    justify-content: space-between;
    margin: 0;
    padding: 0;
    touch-action: pan-y;
	transition: background 0.5s ease-in-out;
}

#win .restart-button {
	background: var(--green-6);
	color: var(--reverse-text-color);
}

#loss .restart-button {
    background: var(--pink-6);
    color: var(--reverse-text-color);
}

.result#win,
.stats#win {
    --background: var(--result-body-win);
}

.result#loss,
.stats#loss {
    --background: var(--result-body-loss);
}

.stats,
.stats .drawer {
    background: var(--incorrect-background);
}

#win .drawer {
    background: var(--drawer-body-win);
}

#loss .drawer {
	background: var(--drawer-body-loss);
}

button.active,
button:active {
    transform: scale(.8);
    opacity: 0.5;
}

header {
    align-items: center;
    display: flex;
	flex-shrink: 0;
    height: 60px;
    justify-content: center;
    padding: 30px 0 0 0;
	transition: background 0.5s ease-in-out;
}

header h1 {
    color: var(--text-color);
    font-family: 'Bellota', sans-serif;
	font-size: 35px;
    line-height: 75%;
    margin: 0;
	transition: color 0.5s ease-in-out;
}

#wrapper {
    display: grid;
    flex: 1;
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
	width: 100%;
}

.container {
    align-self: center;
    display: grid;
    grid-gap: 2%;
    grid-template-columns: repeat(var(--letter-count), 1fr);
    grid-template-rows: repeat(6, 1fr);
    justify-self: center;
    padding: 30px;
}

.cell {
    align-items: center;
    border: .2rem solid var(--pink-3);
    border-radius: .5rem;
    color: var(--text-color);
    display: flex;
    font-size: var(--cell-font-size);
    font-weight: 700;
	justify-content: center;
	transition: 0.12s ease-in-out;
}

.key.match {
	background: #048444;
	border-color: #048444;
}

.key.tentative {
	background: #ca4072;
	border-color: #ca4072;
}

.key.incorrect {
	opacity: 0.35;
}

/***** Result Screen Stuff (Some may be in another spot -- still disorganized) *****/

#restartButton {
	align-self: center;
    border: none;
    border-radius: 50px;
	color: white;
    cursor: pointer;
    font-size: 20px;
	font-weight: 600;
	justify-self: center;
	margin-top: max(130px, 30vh);
	padding: 1em 2em;
	position: absolute;
	opacity: 0;
	transform: scale(0);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
    user-select: none;
}

/***** Main Keyboard *****/

section.game-keyboard {
    background: var(--keyboard-background);
    display: grid;
    flex-shrink: 0;
    grid-gap: var(--keyboard-gap);
    grid-template-rows: 1fr 1fr 1fr;
    height: 100%;
	padding: var(--keyboard-padding);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

#win section#virtualKeyboard,
#loss section#virtualKeyboard {
	flex: 0;
}

section.game-keyboard > div {
    display: grid;
    grid-gap: var(--keyboard-gap);
}

.row-1 {
    grid-template-columns: repeat(10, 1fr);
}

.row-2 {
    grid-template-columns: repeat(11, 1fr);
    grid-template-columns: .5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr .5fr;
}

.row-3 {
    grid-template-columns: repeat(9, 1fr);
    grid-template-columns: 1.555fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.555fr;
}

section.game-keyboard > div button {
    align-items: center;
    background: var(--keyboard-key-background);
    border: 0;
    border-radius: 5px;
    color: var(--text-color);
    display: flex;
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    padding: 0;
    text-transform: uppercase;
	transition: transform 0.2s cubic-bezier(0.33, 1.1, 0.3, 1);
}

section.game-keyboard > div button svg {
    height: 2rem;
    margin-left: -2px;
}

section.game-keyboard > div button[data-key="Enter"],
section.game-keyboard > div button[data-key="Backspace"]{
    background-color: var(--keyboard-special-key-background);
    color: var(--text-color);
	text-transform: lowercase;
}

/**** Winning *****/

body.result-screen {
    overflow: hidden;
}

body.result-screen header h1 {
	color: var(--text-color);
}

.result #restartButton { /* Restart Button Active */
    opacity: 1;
    transform: scale(1);
}

body.result-screen section.game-keyboard {
	opacity: 0;
    transform: translate(0px, var(--keyboard-height));
}

body.result-screen section.game-keyboard.hidden {
	display: none;
}

.container.result-screen div {
    align-self: start;
    opacity: 0;
    transform: scale(0) rotate(-90deg);
    transition: .12s ease-in-out;
}

.container.result-screen div:nth-child(6) {
    transform: scale(0) rotate(0deg);
}

.container.result-screen div.winner {
    /* background: #FFD639; */
    /* border-color: #FDC938; */
	color: #312402;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: 0.75s cubic-bezier(0.42, 0, 0.49, 1.25);
}

.container.result-screen div {
    flex-shrink: 0;
    height: 80px;
    width: 80px;
}

.container.result-screen {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(6, 80px);
	grid-template-rows: 1fr;
    justify-content: center;
}

.container div.loss {
    color: var(--text-color);
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: 0.75s cubic-bezier(0.42, 0, 0.49, 1.25);
}

.container div.loss:nth-child(6) {
    transform: scale(1) rotate(90deg);
}

.answer {
	color: var(--text-color);
	font-size: 4rem;
	position: absolute;
    text-align: center;
	top: 100px;
	width: 100%;
}

/**** landscape keyboard *****/

section.mobile-landscape-game-keyboard {
    display: grid;
    grid-column: 1/2;
    grid-gap: 5px;
    grid-row: 2/3;
    grid-template-columns: repeat(6, 1fr);
}

section.mobile-landscape-game-keyboard > *:nth-child(27) {
    border: 0;
    grid-column: 1/3;
    grid-row: 5/6;
}

section.mobile-landscape-game-keyboard > *:nth-child(25) {
    grid-column: 3/4;
}

section.mobile-landscape-game-keyboard > *:nth-child(26) {
    grid-column: 4/5;
}

section.mobile-landscape-game-keyboard > *:nth-child(28) {
    border: 0;
    grid-column: 5/7;
    grid-row: 5/6;
}

section.mobile-landscape-game-keyboard > * {
    border: 0;
    border-radius: 4px;
}

/***** Stats Page *****/

#statSheet {
    align-items: center;
    color: var(--text-color);
    display: grid;
    height: calc(100% - 2em);
    padding: 2em;
	left: 0;
    opacity: 0;
	position: absolute;
    text-align: center;
    transform: translate(0, 100vh);
	transition: .40s cubic-bezier(0.65, 0.05, 0.36, 1);
	top: 0;
	width: 100%;
	z-index: 1;
}

.visible#statSheet {
    opacity: 1;
    transform: translate(0, calc(100vh - 130px));
}

#lineStats {
    align-items: start;
	display: grid;
    grid-gap: 10px;
    justify-self: center;
    padding-left: 2.5rem;
	width: calc(100% * 2/3);
}

#lineStats > div {
    background: gray;
	border-radius: 2px;
    height: 23px;
    min-width: 1.5rem;
}

button#backToResultScreen {
    background: var(--green-3);
    border: 0;
    border-radius: 50px 50px 0 0;
    color: var(--text-color);
    font-weight: 800;
    height: 70px;
    justify-self: center;
    position: absolute;
	top: 0;
    transition: .40s cubic-bezier(0.65, 0.05, 0.36, 1)
    width: 100px;
}

.open#statSheet {
    background: var(--background);
	transform: translate(0, 0);
}

.open button#backToResultScreen {
	border-radius: 0 0 50px 50px;
}

#gameStats > div {
	display: flex;
	justify-content: space-between;
}

#gameStats {
    align-self: end;
    border-radius: 8px;
	display: grid;
	font-size: 2rem;
    grid-gap: .5em;
    justify-self: center;
	text-align: left;
	width: calc(100% * 2/3);
}

#lineStats > div {
    align-items: center;
	display: flex;
	justify-content: flex-end;
	padding: .5rem;
}

#lineStats > div::before {
	font-size: 1.5rem;
	font-weight: 500;
    left: -0.25rem;
    position: absolute;
}

#lineStats {
	position: relative;
}

#lineStats > div::after {
    font-size: 1rem;
    font-weight: 500;
	position: absolute;
	right: -0.25rem;
}

#lineOne::before { content: '1'; }
#lineTwo::before { content: '2'; }
#lineThree::before { content: '3'; }
#lineFour::before { content: '4'; }
#lineFive::before { content: '5'; }
#lineSix::before { content: '6'; }

/***** Style Supplement *****/

:root {
    --loss-color: #333333;
    --loss-second-color: #111111;
    --win-color: var(--green-3);
    --win-second-color: var(--green-5);
}

:root {
    --line-one-width: 0;
    --line-two-width: 0;
    --line-three-width: 0;
    --line-four-width: 0;
    --line-five-width: 0;
    --line-six-width: 0;
}

html#win {
    --result-body: var(--win-color);
    --result-header: var(--win-second-color);
}

html#loss {
    --result-body: var(--loss-color);
    --result-header: var(--loss-second-color);
}

body {
    background: var(--background);
    overflow: hidden;
}

button,
#grabby {
    cursor: pointer;
}

#viewport {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.wrapper { /* Wrapper Base */
    height: 100%;
    position: absolute;
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
    width: 100%;
}

.wrapper > p {
    align-self: end;
    color: var(--text-color);
    font-family: 'Bellota';
    font-size: 3rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.game .wrapper#game,
.result .wrapper#result,
.stats .wrapper#result,
.stats .wrapper#stats {
    transform: translate(0, 0);
}

/***** Game Screen *****/

.wrapper#game { /* Game Background */
    transform: translate(-100%, 0);
}

.game.active body { overflow: auto; }

.wrapper#game {
	display: grid;
	grid-template-rows: auto var(--keyboard-height);
}

#win #virtualKeyboard, #loss #virtualKeyboard {
	transform: translate(0, var(--keyboard-height));
}

#win section#wrapper,
#loss section#wrapper {
	transform: translate(0, 0);
}

.game#win #correctWord,
.game#loss #correctWord {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

#correctWord {
    align-self: center;
    bottom: 10rem;
	font-family: 'Bellota', sans-serif;
	font-size: 2.75rem;
    font-weight: 600;
    justify-self: end;
    opacity: 0;
    padding: 0 5%;
	position: absolute;
    transform: translate(0, 100%) scale(0);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
    width: 100%;
}

#blockAnswer span {
    align-items: center;
    border-radius: 6px;
	color: white;
    display: inline-flex;
	font-family: 'Roboto', sans-serif;
    height: 60px;
    justify-content: center;
    width: 60px;
}

#win #blockAnswer span {
	background: var(--match-color);
}

#loss #blockAnswer span {
	background: var(--tentative-color);
}

#blockAnswer span:nth-child(n + 2) {
    margin-left: .25em;
}

#correctWord strong {
    display: block;
    margin-top: .75em;
}

/***** Result Screen *****/

.wrapper#result { /* Result Background */
    display: grid;
    transform: translate(100%, 0);
    grid-template-rows: 1.5fr .5fr 3fr 1fr;
}

.message { /* Message Base */
    align-items: center;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(6, 45px);
    grid-gap: .75rem;
    font-size: 2rem;
    justify-content: center;
    justify-self: center;
    opacity: 0;
    transform: scale(0);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

p.pre-result-message { /* Pre Message Base */
    opacity: 0;
    transform: scale(0);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.result p.pre-result-message { /* Pre Message Active */
    opacity: 1;
	padding-bottom: .5em;
    transform: scale(1);
}

.result .message { /* Message Active */
    opacity: 1;
    transform: scale(1);
}

.message span { /* Message Blocks */
    align-items: center;
    background: gold;
    border-radius: 6px;
    display: flex;
    font-size: 2.5rem;
    font-weight: 700;
    height: 45px;
    justify-content: center;
}

.result #restartButton { /* Restart Button Active */
    opacity: 1;
    transform: scale(1);
}

#restartButton { /* Restart Button Base */
    font-family: 'Roboto';
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
    padding: 1em 3.5em;
    position: relative;
    transform: scale(0);
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.stats-button,
.settings-button {
    align-self: start;
    border: 0;
    color: var(--text-color);
    font-family: 'Roboto';
    font-weight: 500;
    justify-self: center;
    transition: .12s cubic-bezier(0.65, 0.05, 0.36, 1);
    z-index: 3;
}

button#statsButton.stats-button {
	opacity: 0;
	transform: scale(0);
	transition: 0.5s ease-in-out;
}

button#statsButton.stats-button:focus {
	outline: none;
}

.result button#statsButton.stats-button {
	opacity: 1;
	transform: scale(1);
}

.stats-button p { /* Stats Button Text */
    font-size: 1.4rem;
    margin: .5em 0 0 0;
}

.stats-button svg,
.settings-button svg { /* Stats Button Icon */
    width: 24px;
}

.stats-button svg rect { /* Stats Button Icon Shapes */
    fill: var(--text-color);
}

/***** Stats Drawer *****/

.wrapper#stats { /* Stats Background */
    top: 2rem;
    transform: translate(0, calc(100vh - 60px));
    z-index: 999;
}

#statSheet h2 {
    font-size: 3rem;
    font-weight: 400;
    margin: 0;
}

#lineStats h3 {
    font-size: 2rem;
    margin: 0 0 2rem -2.5rem;
}

#grabby {
    height: 90px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

#statSheet::before {
    background: var(--text-color);
    border-radius: 3px;
    content: '';
    height: 3px;
    justify-self: center;
    opacity: 0.75;
    position: absolute;
    top: 2.35rem;
    width: 35px;
}

#statSheet {
    border-radius: 35px 35px 0 0;
    opacity: 1;
    overflow: hidden;
    transform: translate(0, 0);
}

#lineStats > div {
    background: var(--bar-color);
    position: relative;
}

#lineStats > div::before {
    left: -2.5rem;
}

#lineOne .bar { width: var(--line-one-width); }
#lineTwo .bar { width: var(--line-two-width); }
#lineThree .bar { width: var(--line-three-width); }
#lineFour .bar { width: var(--line-four-width); }
#lineFive .bar { width: var(--line-five-width); }
#lineSix .bar { width: var(--line-six-width); }

.stats #lineStats .bar { /* Line Stats Bar Active */
    min-width: 2rem;
    opacity: 1;
}

.result #viewport .wrapper#stats #lineStats > div .bar {
    min-width: 0;
    width: 0;
}

#lineStats .bar { /* Line Stats Bar Base */
    align-items: center;
    background: var(--bar-background-color);
    border-radius: 2px;
    content: '';
    display: flex;
    font-weight: 800;
    height: 100%;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    padding-right: .75rem;
    position: absolute;
    transition: .5s cubic-bezier(0.65, 0.05, 0.36, 1);
    transition-delay: .25s;
}

.gameStats {
    display: grid;
    font-size: 2rem;
    grid-gap: 1.5rem;
    justify-self: center;
    width: calc(100% * 2/3);
}

.gameStats > div {
    display: flex;
    justify-content: space-between;
}

.gameStats  p { margin: 0; }

/***** Light Mode *****/

@media (prefers-color-scheme: light) {

    :root {
        --bar-background-color: hsla(0deg 0% 13% / 75%);
		--bar-color: #9de9c3;
        --background: white;
        --board-second-color: hsl(330deg 38% 97%);
        --drawer-body-loss: #E5DADE;
        --drawer-body-win: #b8f4d4;
        --incorrect-background: hsl(0deg 0% 22%);
        --incorrect-borderColor: hsl(0deg 0% 22%);
        --incorrect-color: hsl(0deg 0% 22%);
        --incorrect-textColor: white;
        --match-background: hsl(150deg 76% 32%);
        --match-borderColor: hsl(150deg 76% 32%);
        --match-color: hsl(150deg 76% 32%);
        --match-textColor: white;
        --result-body-loss: #F4E9ED;
        --result-body-win: #cbfce4;
        --tentative-background: var(--pink-3);
        --tentative-borderColor: var(--pink-3);
        --tentative-color: var(--pink-3);
        --tentative-textColor: white;
        --text-color: var(--gray-5);

        /* --keyboard-background: rgb(209,211,217); */
        --keyboard-background: rgb(227 228 232);
        --keyboard-key-background: white;
        --keyboard-special-key-background: rgb(171,176,186);

    }

	.key.match,
	.key.tentative {
		color: white;
	}

    #loss {
        --bar-background-color: hsl(338deg 20% 45%);
        --bar-color: hsl(338deg 40% 85%);
    }

    #win .restart-button {
    	background: var(--match-color);
    }

    #loss .restart-button {
        background: #C94072;
    }

	#lineStats > div span {
		color: white;
	}

    section.game-keyboard > div button {
        color: #333333;
        box-shadow: 0px 1px 0px 0px rgb(0 0 0 / 10%);
    }
    section.game-keyboard > div button[data-key="Enter"], section.game-keyboard > div button[data-key="Backspace"] {
        color: #333333;
    }

    section.game-keyboard > div button[data-key="Backspace"] path {
        fill: #333333;
    }

}

/***** Media Queries *****/

@media screen and (max-width: 900px) {

	:root{
		--keyboard-height: 200px;
        --keyboard-padding: 10px 5px;
        --keyboard-gap: 5px;
	}

	body {
		grid-template-rows: 60px auto;
	}

	section.game-keyboard {
		display: grid;
	}

}

@media screen and (max-width: 550px) {

    :root{
        --keyboard-gap: 3px;
        --keyboard-padding: 10px 3px;
    }

	.container.result-screen {
		grid-template-columns: repeat(6, 60px);
	}

    .container.result-screen div {
        width: 60px;
        height: 60px;
    }

	#correctWord {
		font-size: 2.5rem;
	}

	#blockAnswer span {
		height: 5rem;
		width: 5rem;
	}

}

@media screen and (max-width: 430px) {

    .container.result-screen {
		grid-template-columns: repeat(6, 40px);
	}

    .container.result-screen div {
        width: 40px;
        height: 40px;
    }

}