html {
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1.3em;
	line-height: 1.5rem;
}

html,
body {
	background: var(--white);
}

/* variables */
:root {
	--keyboard-height: 200px;
	--game-max-width: 500px;
	--selected-indicator: black;
	--selected-indicator-dark-mode: white;
	--completed-indicator: #99db89;
	--share-color: rgb(88, 163, 81);
	--failed-indicator: #f2865f;
	--playing-indicator: #f6e784;
	--not-completed-indicator: var(--almost-white);;
	--black: #000000;
	--white: #ffffff;
	--almost-white: #efe9e6;
	--almost-black: #111a20;
}


* {
	user-select: none;
}

a {
	color: black;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: gray;
}

button {
	font-size: 20px;
	font-weight: 700;
	padding: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	touch-action: manipulation;
}


button.black {
	height: 40px;
	padding: 0 30px;
	background: var(--black);;
	color: var(--white);;
	border: 3px solid var(--black);;
	border-radius: 40px;
}

button.black:active {
	background: var(--white);;
	color: var(--black);;
}

button.white {
	height: 40px;
	padding: 0 30px;
	background: var(--white);;
	color: var(--black);;
	border: 3px solid var(--black);;
	border-radius: 40px;
}

button.white:active {
	background: var(--black);;
	color: var(--white);;
}

button.with-icon {
	padding: 5px;
	margin-right: 10px;
	width: 42px;
	height: 42px;
	line-height: 20px;
	background: none;
    border: 2px solid var(--black);
    border-radius: 50%;
}

button.with-icon:active {
	background: var(--black);
	color: var(--white);
}

button.with-icon:active > img {
	filter: invert(1);
}

button.closeDialog {
	position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

button.closeDialog::after {
	content: "✕";
	margin: auto;
}

button.tutorial-ctrl {
	flex: 1;
}

button.share {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	background-color: var(--share-color);
	border-radius: 40px;
	color: white;
}

button.share > svg {
	fill: white;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--black);;
}

header.archive {
	align-items: center;
}

header h1 {
	position: relative;
	margin: 0;
	line-height: 40px;
}


footer {
	text-align: center;
	padding: 20px;
	font-size: 0.75rem;
	line-height: 1rem;
	color: gray;
}

footer a {
	color: gray;
}

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.composed-logo {
	display: flex;
	align-items: center;
}

.logo {
	max-width: 100px;
}

.container {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	max-width: var(--game-max-width);
	margin: 40px auto;
}

.game {
	border: 2px solid var(--black);
    padding: 20px;
    display: flex;
    flex-direction: column;
	/* box-shadow: 0px 3px 0px 2px rgba(0,0,0,0.1), 0px 6px 0px 4px rgba(0,0,0,0.1), 0px 9px 0px 6px rgba(0,0,0,0.1), 0px 12px 0px 8px rgba(0,0,0,0.1), 0px 15px 0px 10px rgba(0,0,0,0.1), 0px 18px 0px 12px rgba(0,0,0,0.1), 0px 21px 0px 14px rgba(0,0,0,0.1), 0px 24px 0px 16px rgba(0,0,0,0.1), 0px 27px 0px 18px rgba(0,0,0,0.1), 0px 30px 0px 20px rgba(0,0,0,0.1), 5px 5px 15px 5px rgba(0,0,0,0); */
	/* box-shadow: 5px 5px 15px 5px #FF8080, -9px 5px 15px 5px #FFE488, -7px -5px 15px 5px #8CFF85, 12px -5px 15px 5px #80C7FF, 12px 10px 15px 7px #E488FF, -10px 10px 15px 7px #FF616B, -10px -7px 27px 1px #8E5CFF, 5px 5px 15px 5px rgba(0,0,0,0); */
	box-shadow: 5px 5px 0px 1px var(--black);
}

.game h1,h2,h3 {
	text-align: center;
}

a.btn-black {
	border: 2px solid var(--black);
	background-color: var(--black);
	color: var(--white);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 30px;
}

a.btn-black:hover {
	background-color: var(--white);
	color: var(--black);
	
}

.panel-light {
	background-color: var(--white);
}

.bg {
	height: 500px;
	width: 100%;
	position: relative;
	z-index: 0;
}

.fg-top {
	height: 249.5px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
	transition: opacity 2s;
}

.fg-bottom {
	height: 249.5px;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 100;
	transition: opacity 2s;
}

.fg-center {
	height: 1px;
	position: absolute;
	top: 249.5px;
	width: 100%;
}

.bang {
    background-image: radial-gradient(#7ed56f, #28b485);
	mask-image: radial-gradient(circle, transparent 25%, rgba(0, 0, 0, 1) 25%);
	position: fixed;
    width: 50px;
    height: 50px;
	margin: -35px 25px;
	border-radius: 50%;
	z-index: 100;
	transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.bang-expand {
	transform: scale(200);
}

@keyframes reveal-transition {
	0% {
		opacity: 100%;
	}
	100% {
		opacity: 75%;
	}
}

@keyframes darken-transition {
	0% {
		background-color: white;
	}
	100% {
		background-color: #ededed;
	}
}


.reveal {
	opacity: 75%;
}

.darken {
	animation: darken-transition 2s linear forwards;
}

@keyframes game-translate {
	0% {
		top: 300px;
	}
	80%, 100% {
		top: 0;
	}
}

.translucent {
	opacity: 80%;
}

.shape {
	background-color: transparent;
	height: 200px;
	position: absolute;
	width: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: game-translate 5s linear infinite;
}

.shape img {
	max-height: 100%;
}

/* keyboard */

.keyboard {
	width: 100%;
	max-width: var(--game-max-width);
	margin: 0 8px;
	user-select: none;
  }
  
.kb-row {
	display: flex;
	width: 100%;
	margin: 0 auto 8px;
	/* https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom */
	touch-action: manipulation;
	justify-content: center;
	position: relative;
}

.letter-space {
	flex:5;
}

.letter-enter {
	flex:2;
}


.fake-padding {
	flex: 2;
}

.level-container {
	display: flex;
	align-items: center;
	height: 100%;
	margin: auto;
}

.level-nav {
	flex: 1;
	font-size: 48px;
}

.current-level {
	flex: 6;
	font-size: 48px;
	font-weight: 700;
}

.levels-grid {
	margin: 20px 0;
	display: grid;
	grid-template-columns: repeat(5, 60px);
	justify-content: space-evenly;
	row-gap: 10px;
}


.past-level {
	height: 58px;
}

.past-level:active {
	background: black;
	color:white;
}

.past-level-won {
	background: var(--completed-indicator);
}

.past-level-failed {
	background: var(--failed-indicator);
}

.past-level-playing {
	background: var(--playing-indicator);
}

.past-level-not-started {
	background: var(--not-completed-indicator);
}

.past-level-selected {
	outline: 3px solid var(--selected-indicator);
}

.answer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@keyframes toast-show {
	0% {
		opacity: 0%;
	}

	10%, 100% {
		opacity: 100%;
	}
}

@keyframes toast-hide {
	0% {
		opacity: 100%;
	}

	100% {
		opacity: 0%;
	}
}

.toast-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 100px;
	width: 100%;
	z-index: 100;
}

.toast {
	padding: 10px;
	background-color: var(--almost-white);;
	border-radius: 5px;
}

.toast-show {
	animation: toast-show 7s linear forwards;
}

.toast-hide {
	animation: toast-hide 1s linear forwards;
}

.failed-attempts {
	display: flex;
	flex-wrap: wrap;
	position: absolute; /* TODO maybe remove this */
}

.failed-attempt {
	text-decoration: line-through;
	text-transform: uppercase;
	margin: 0 10px;
}

.level-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
}

.level-controls > button {
	margin-top: 10px;
}

/* 
--------------------------------------------------------------------------------
dark mode
--------------------------------------------------------------------------------
*/

@media (prefers-color-scheme: dark) {
	html.dark,
	html.dark dialog,
	html.dark .word-result,
	html.dark .brand::after {
		filter: invert(1);
	}

	/* another invert on top to maintain success/fail/outline colors */
	html.dark .past-level-won,
	html.dark .past-level-failed,
	html.dark .past-level-playing {
		filter: invert(1);
	}

	html.dark .past-level-won.past-level-selected,
	html.dark .past-level-failed.past-level-selected,
	html.dark .past-level-playing.past-level-selected {
		outline: 3px solid var(--selected-indicator-dark-mode);
	}

	html.dark .share {
		filter: invert(1);
	}

	html.dark .past-level:active {
		background: white;
		color: black;
	}
}

/*
--------------------------------------------------------------------------------
responsive dimensions
--------------------------------------------------------------------------------
*/


@media screen and (max-width: 520px) {
	h1 {
		font-size: 40px;
	}

	.working-word {
		font-size: 18px;
	}

	button {
		font-size: 16px;
		padding: 5px;
		border-radius: 2px;
	}

	button.with-icon {
		width: 38px;
		height: 38px;
		margin-right: 6px;
	}

	button.letter-button {
		font-size: 20px;
		width: 34px;
		height: 50px;
		margin: 2px;
		border-radius: 5px;
	}

	button.letter-special {
		font-size: 16px;
		width: 34px;
		height: 50px;
		border-radius: 5px;
		margin: 2px 6px;
	}

	button.letter-bksp {
		width: 42px;
	}
	
	button.black {
		padding: 0 16px;
	}

	button.closeDialog {
		padding: 0;
	}

	footer {
		font-size: 0.75rem;
		padding: 5px 0;
	}
}

@media screen and (max-width: 380px) {
	h1 {
		font-size: 34px;
	}

	.working-word {
		font-size: 16px;
	}

	button {
		font-size: 14px;
		padding: 5px;
		border-radius: 2px;
	}

	button.with-icon {
		width: 34px;
		height: 34px;
		margin-right: 6px;
	}

	button.letter-button {
		font-size: 16px;
		width: 30px;
		height: 46px;
		margin: 2px;
		border-radius: 5px;
	}

	button.letter-special {
		font-size: 16px;
		width: 30px;
		height: 46px;
		border-radius: 5px;
		margin: 2px 6px;
	}

	button.letter-bksp {
		width: 42px;
	}

	button.black {
		padding: 0 14px;
	}

	button.closeDialog {
		padding: 0;
	}

	.levels-grid {
		grid-template-columns: repeat(4, 60px);
	}

	footer {
		font-size: 0.6rem;
		padding: 5px 0;
	}
}

@media screen and (max-width: 320px) {
	h1 {
		font-size: 28px;
	}

	.working-word {
		font-size: 14px;
	}

	button {
		font-size: 12px;
		padding: 3px;
		border-radius: 2px;
	}

	button.with-icon {
		width: 30px;
		height: 30px;
		margin-right: 4px;
	}

	button.letter-button {
		font-size: 16px;
		width: 24px;
		height: 40px;
		margin: 1px;
		border-radius: 5px;
	}

	button.letter-special {
		font-size: 16px;
		width: 24px;
		height: 40px;
		border-radius: 5px;
	}

	button.letter-bksp {
		width: 36px;
		margin: 0 1px;
	}

	button.black {
		padding: 0 12px;
	}

	footer {
		font-size: 0.6rem;
		padding: 5px 0;
	}
}

/*
--------------------------------------------------------------------------------
responsive height for game
--------------------------------------------------------------------------------
*/

@media screen and (max-height: 1000px) {
	.bg {
		height: 300px;
	}
	
	.fg-top {
		height: 149.5px;
	}
	
	.fg-bottom {
		height: 149.5px;
	}
	
	.fg-center {
		height: 1px;
		top: 149.5px;
	}

	.shape {
		height: 150px;
		position: absolute;
		animation: game-translate-shallow 5s linear infinite;
	}

	button.level-nav-prev,
	button.level-nav-next {
		top: 150px;
	}

	@keyframes game-translate-shallow {
		0% {
			top: 150px;
		}
		80%, 100% {
			top: 0;
		}
	}
}

@media screen and (max-height: 740px) {
	.bg {
		height: 200px;
	}
	
	.fg-top {
		height: 99.5px;
	}
	
	.fg-bottom {
		height: 99.5px;
	}
	
	.fg-center {
		height: 1px;
		top: 99.5px;
	}

	.shape {
		height: 100px;
		position: absolute;
		animation: game-translate-super-shallow 5s linear infinite;
	}

	button.level-nav-prev,
	button.level-nav-next {
		top: 100px;
	}

	@keyframes game-translate-super-shallow {
		0% {
			top: 100px;
		}
		80%, 100% {
			top: 0;
		}
	}
}

@media screen and (max-height: 600px) {
	.bg {
		height: 160px;
	}
	
	.fg-top {
		height: 79.5px;
	}
	
	.fg-bottom {
		height: 79.5px;
	}
	
	.fg-center {
		height: 1px;
		top: 79.5px;
	}

	.shape {
		height: 80px;
		position: absolute;
		animation: game-translate-super-shallow 5s linear infinite;
	}

	button.level-nav-prev,
	button.level-nav-next {
		top: 80px;
	}

	@keyframes game-translate-super-shallow {
		0% {
			top: 80px;
		}
		80%, 100% {
			top: 0;
		}
	}
}