/* Base */

*,
::after,
::before {
	box-sizing: border-box;
}

:root, /* Non shadow-dom context */
:host /* Shadow-dom context */
{
	/* Color variations */
	--color-dark-blue: #001219;
	--color-blue: #005f73;
	--color-turquoise: #0a9396;
	--color-mint: #94d2bd;
	--color-beige: #e9d8a6;
	--color-orange: #ee9b00;
	--color-dark-orange: #ca6702;
	--color-mild-red: #bb3e03;
	--color-red: #ae2012;
	--color-dark-red: #9b2226;

	/* Gray scale */
	--color-gray-100: #eee;
	--color-gray-300: #ccc;
	--color-gray-500: #999;
	--color-gray-700: #666;
	--color-gray-900: #333;

	/* Theme color settings */
	--color-background: var(--color-gray-900);
	--color-base-font: var(--color-gray-100);

	/* Fonts */
	--font-family: "VT323", Arial, Helvetica, sans-serif;
}

@media (prefers-color-scheme: light) {
	:root, /* Non shadow-dom context */
	:host /* Shadow-dom context */
	{
		--color-background: var(--color-gray-100);
		--color-base-font: var(--color-gray-900);
	}
}

@font-face {
	font-family: "VT323";
	src: url("../fonts/VT323.ttf");
}

* {
	font-family: var(--font-family), sans-serif;
	font-size: 18px;
	letter-spacing: 2px;
}

/* Button */

:host {
	--color-button-border: var(--color-dark-blue);
	--color-button-background: var(--color-blue);
	--color-button-negative-background: var(--color-mild-red);
	--color-button-text: var(--color-gray-100);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-button-background: var(--color-mint);
		--color-button-text: var(--color-gray-900);
	}
}

.button {
	cursor: pointer;
	padding: 10px;
	border: 2px dotted var(--color-button-border);
	min-height: 2.5rem;
	background: var(--color-button-background);
	color: var(--color-button-text);
	font-size: .8rem;
	text-transform: uppercase;
	font-family: var(--font-family), sans-serif;
}

.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.button.negative {
	background: var(--color-button-negative-background);
}

/* Questing */

:host {
	--color-wrapper-background: var(--color-gray-900);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-wrapper-background: #fff;
	}
}

.wrapper {
	min-height: 110px;
	/* combined with the styling in quest.js this will prevent rendering without styles */
	visibility: visible;
	position: relative;
	padding: 15px 20px;
	background: var(--color-wrapper-background);
	border: 2px dotted var(--color-turquoise);
	box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.1) 0 8px 10px -6px;
}

.slot {
	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 110px;
	width: 100%;
	cursor: pointer;
	padding: 15px 20px;
	background: var(--color-button-background);
	border: 2px dotted var(--color-button-border);
	box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.1) 0 8px 10px -6px;
	color: var(--color-button-text);
	font-size: .8rem;
	text-transform: uppercase;
	font-family: var(--font-family), sans-serif;
	/* combined with the styling in quest.js this will prevent rendering without styles */
	visibility: visible;
}

.slot:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.description {
	margin: 0 0 1rem 0;
}

.rewards {
	display: flex;
	align-items: flex-end;
	vertical-align: middle;
	flex-direction: column;
	gap: 10px;
}

.reward,
.damage {
	margin: 0;
	font-weight: bold;
	font-size: 1.6rem;
}

.reward {
	color: #9f7d3e;
}

.damage {
	color: #9f3e3e;
}

.damage img {
	margin: 0 0 -4px -10px;
}

.interactions {
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding-top: 5px;
}

.header {
	text-align: center;
	margin: 2rem 0 0 0;
}

.quests {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 6rem;
}

.startVoteWrapper {
	position: fixed;
	bottom: 2rem;
	right: 20px;
	padding-top: 5px;
}

.health {
	margin: .5rem 0 1.5rem 0;
}

.died {
	margin: 0 0 3rem 0;
	font-size: 2rem;
}

@keyframes bounce {
	20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-5px);
	}
}

.heart {
	animation: bounce 1s ease;
}

.heart:nth-child(1) {
	animation-delay: 0s;
}

.heart:nth-child(2) {
	animation-delay: 1s;
}

.heart:nth-child(3) {
	animation-delay: 2s;
}

/* Utility */

.hidden {
	display: none !important;
}

/* Base components */

.heading {
	margin: 0;
	font-family: var(--font-family), sans-serif;
	font-size: 2.5rem;
	color: var(--color-orange);
	text-shadow: 1px 1px 0 var(--color-base-font);
}

.progress {
	appearance: none;
	display: block;
	width: 100%;
	height: 5px;
	border: 0;
	border-radius: 0;
	background: rgb(23, 38, 34);
}

/* Progress bar elements are strange. */
.progress[value]::-webkit-progress-value {
	background: rgb(70, 136, 201);
}

.progress::-webkit-progress-value,
.progress::-moz-progress-bar {
	background: rgb(70, 136, 201);
}

@keyframes rotate {
	0% {
		transform: scaleX(1);
	}

	5% {
		transform: scaleX(-1);
	}

	10% {
		transform: scaleX(1);
	}

	90% {
		transform: scaleX(1);
	}

	95% {
		transform: scaleX(-1);
	}

	100% {
		transform: scaleX(1);
	}
}

.price {
	color: #b89555;
	font-weight: bold;
	font-size: 1.6rem;
}

.price img {
	margin: 0 0 -2px -8px;
	animation: rotate 10s ease infinite;
	animation-delay: 2s;
}

.list {
	list-style-type: none;
	margin: 1rem 0;
	padding: 0;
}

.list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	border-bottom: 1px solid #aaa;
	min-height: 2.5rem;
}

.list li:last-child {
	border: 0;
}

.countdown {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* Game Wrapper */

.settings {
	position: fixed;
	top: 1rem;
	right: 20px;
	z-index: 1;
}

.shopButton {
	position: fixed;
	bottom: 2rem;
	left: 20px;
}

.closeLayer {
	position: absolute;
	top: 0;
	right: 0;
}

.networkStatus {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	text-align: center;
	background: yellow;
	color: var(--color-gray-900);
}

/* GameOver view */

.center {
	text-align: center;
}

.historyWrapper {
	position: relative;
	margin-top: 50vh;
	margin-bottom: 100px;
}

.historyEntry {
	position: relative;
	padding: 15px 20px 25px;
	background: var(--color-wrapper-background);
	border: 2px dotted var(--color-turquoise);
	box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.1) 0 8px 10px -6px;
}

.historyGroupHeadline {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 1rem 0 0.5rem 0;
	font-size: 1.8rem;
	background: var(--color-wrapper-background);
}

.historyGroupWrapper {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.historyQuestIcons {
	position: absolute;
	top: 15px;
	right: 20px;
}

.historyTimestamp {
	position: absolute;
	bottom: 0.5rem;
	right: 20px;
	margin: 0;
	font-size: 14px;
}

.historyPlayer {
	position: absolute;
	bottom: 0.5rem;
	left: 20px;
	margin: 0;
	font-size: 14px;
}

.historyMessage {
	margin-top: 0;
	margin-right: 32px;
}

/* Layers */

:host {
	--color-layer-background: var(--color-gray-900);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-layer-background: var(--color-gray-100);
	}
}

.shim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
}

.layer {
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	max-height: calc(80% - 3rem);
	overflow: auto;
	transform: translate(-50%, -50%);
	padding: 10px;
	border: 4px double var(--color-turquoise);
	background: var(--color-layer-background);
	box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
}

.closeButton {
	position: fixed;
	bottom: 2rem;
	left: 20px;
}

/* Error Layer */

.error-layer {
	border: 4px double var(--color-red);
	display: flex;
	align-items: center;
	gap: 10px;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-5px);
	}
}

.error-layer img {
	animation: bounce 1s ease;
}

/* Input */

:host {
	--color-input-border: var(--color-dark-blue);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-input-border: var(--color-dark-blue);
	}
}

.label {
	width: 100%;
	display: block;
	margin: .5rem 0;
}

.label p {
	margin: 1rem 0 0.2rem 0;
	text-transform: uppercase;
}

.input {
	padding: 0.5rem;
	border-radius: 0;
	border: 2px solid var(--color-dark-blue);
	font-size: 1rem;
	width: 100%;
}

.input:focus {
	border: 2px solid var(--color-turquoise);
	outline: none;
}

.fieldset {
	margin: 1rem 0;
}

/* Create view */

.details {
	margin: 2rem 0;
}

/* Game Over View */

.game-over-title {
	text-align: center;
	position: relative;
}

.message {
	text-align: center;
	position: relative;
	font-size: 2rem;
}

.duck-runner {
	left: -400px;
	bottom: -700px;
}

/* Home View */

:host {
	--color-title: var(--color-orange);
	--color-intro: var(--color-mint);
	--color-intro-shadow: var(--color-gray-900);
	--color-title-shadow: var(--color-base-font);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-intro: var(--color-turquoise);
		--color-intro-shadow: var(--color-gray-100);
	}
}

.welcome {
	position: absolute;
	text-align: center;
	font-family: var(--font-family), sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	top: 10%;
	bottom: 10%;
	left: 1rem;
	right: 1rem;
	overflow: hidden;
}

.intro {
	font-style: italic;
	font-size: 6vw;
	margin: 0 0 -.5rem 0;
	color: var(--color-intro);
	text-shadow: 1px 1px 0 var(--color-intro-shadow);
}

.title {
	margin: 0 0 4rem 0;
	color: var(--color-title);
	text-shadow: 1px 1px 0 var(--color-title-shadow);
	display: grid;
	grid-template-columns: 1fr;
}

.title span {
	font-weight: bold;
	grid-row-start: 1;
	grid-column-start: 1;
	font-size: 20vw;
	--stack-height: calc(100% / 3 - 1px);
	--inverse-index: calc(calc(3 - 1) - var(--index));
	--clip-top: calc(var(--stack-height) * var(--index));
	--clip-bottom: calc(var(--stack-height) * var(--inverse-index));
	clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
	animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.title span:nth-child(odd) {
	--glitch-translate: 8px;
}

.title span:nth-child(even) {
	--glitch-translate: -8px;
}

@keyframes stack {
	0% {
		opacity: 0;
		transform: translateX(-50%);
		text-shadow: 1px 1px 0 var(--color-title-shadow), -2px 3px 0 red, 2px -3px 0 blue;
	}
	60% {
		opacity: 0.5;
		transform: translateX(50%);
	}
	80% {
		transform: none;
		opacity: 1;
		text-shadow: 1px 1px 0 var(--color-title-shadow), 2px -3px 0 red, -2px 3px 0 blue;
	}
	100% {
		text-shadow: 1px 1px 0 var(--color-title-shadow);
	}
}

@keyframes glitch {
	0% {
		text-shadow: 1px 1px 0 var(--color-title-shadow), -2px 3px 0 red, 2px -3px 0 blue;
		transform: translate(var(--glitch-translate));
	}
	2% {
		text-shadow: 1px 1px 0 var(--color-title-shadow), 2px -3px 0 red, -2px 3px 0 blue;
	}
	4%, 100% {
		text-shadow: 1px 1px 0 var(--color-title-shadow);
		transform: none;
	}
}

@keyframes run {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(700px);
	}
}

.duck-runner {
	--duck-size: 40px;
	--bar-size: 30px;

	transform: rotate(-65deg);
	position: fixed;
	left: -390px;
	bottom: -540px;
}

.runner-1,
.runner-2,
.runner-3,
.runner-4,
.runner-5,
.runner-6 {
	height: var(--bar-size);
	width: 500px;
	position: relative;

	animation-name: run;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.runner-1::after,
.runner-2::after,
.runner-3::after,
.runner-4::after,
.runner-5::after,
.runner-6::after {
	content: "";
	background-image: url("../images/duck.svg");
	background-size: contain;
	width: var(--duck-size);
	height: var(--duck-size);
	display: block;
	position: absolute;
	top: calc((var(--duck-size) - var(--bar-size)) / 2 * -1);
	right: calc(var(--duck-size) / 2 * -1 + 5px);
}

.runner-1 {
	background: var(--color-turquoise);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-turquoise) 100%);
}

.runner-2 {
	margin-left: -30px;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-beige) 100%);
	animation-delay: 100ms;
}

.runner-3 {
	margin-left: -60px;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-orange) 100%);
	animation-delay: 200ms;
}

.runner-4 {
	margin-left: -90px;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-dark-orange) 100%);
	animation-delay: 300ms;
}

.runner-5 {
	margin-left: -120px;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-red) 100%);
	animation-delay: 400ms;
}

.runner-6 {
	margin-left: -150px;
	background: rgb(2, 0, 36);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-dark-blue) 100%);
	animation-delay: 500ms;
}

/* Join View */

:host {
	--color-input-border: var(--color-dark-blue);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-input-border: var(--color-dark-blue);
	}
}

.label {
	width: 100%;
	display: block;
	margin: .5rem 0;
}

.label p {
	margin: 1rem 0 0.2rem 0;
	text-transform: uppercase;
}

.select {
	padding: 0.5rem;
	border-radius: 0;
	border: 2px solid var(--color-dark-blue);
	font-size: 1rem;
	width: 100%;
}

.select:focus {
	border: 2px solid var(--color-turquoise);
	outline: none;
}

/* Shop View */

.shop-title {
	font-size: 2rem;
	margin: 0 0 1rem 0;
	color: var(--color-turquoise);
}

.item {
	padding: 10px;
	margin: 0 0 1rem 0;
	border: 2px dotted var(--color-turquoise);
}

.category {
	font-size: 1.4rem;
	margin: 0 0 1rem 0;
}

.name {
	margin: 0;
	color: var(--color-mint);
}

.cost {
	margin: 0;
}

.balance {
	font-size: 1.6rem;
	margin: 0 0 2rem 0;
}

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

.playerSelection {
	margin: 1rem 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
	padding: 1rem 0 0 0;
	border-top: 2px solid var(--color-turquoise);
}

.chatTimestamp {
	font-size: 14px;
}

/* Vote view */

:host {
	--color-vote-background: var(--color-turquoise);
}

@media (prefers-color-scheme: light) {
	:host {
		--color-vote-background: var(--color-mint);
	}
}

.voted {
	background: var(--color-vote-background);
}

.timer {
	font-size: 4rem;
	text-align: center;
	color: var(--color-orange);
}

/* Quest view */

.preview-wrapper {
	padding-bottom: 65px;
}

.preview-title {
	font-size: 2rem;
	margin: 0 0 1rem 0;
	color: var(--color-turquoise);
}

.preview-content {
	display: flex;
	gap: 10px;
	padding: 10px;
	border: 2px dotted var(--color-turquoise);
	margin: 0;
}

@keyframes flip {
	0% {
		transform: rotateY(0);
	}

	5% {
		transform: rotateY(180deg);
	}

	10% {
		transform: rotateY(0);
	}
}

@keyframes bump {
	0% {
		transform: translateY(0);
	}

	5% {
		transform: translateY(-8px);
	}

	10% {
		transform: translateY(0);
	}
}

.reward img {
	animation: flip 10s 5s linear infinite;
}

.reward img:nth-child(2) {
	animation-delay: 5.5s;
}

.reward img:nth-child(3) {
	animation-delay: 6s;
}

.reward.low img:nth-child(2),
.reward.low img:nth-child(3) {
	filter: grayscale(100%);
}

.reward.medium img:nth-child(3) {
	filter: grayscale(100%);
}

.difficulty.easy img:nth-child(2),
.difficulty.easy img:nth-child(3) {
	filter: grayscale(100%);
}

.difficulty.medium img:nth-child(3) {
	filter: grayscale(100%);
}

.difficulty img {
	animation: bump 3s 5s linear infinite;
}

.difficulty img:nth-child(2) {
	animation-delay: 5.5s;
}

.difficulty img:nth-child(3) {
	animation-delay: 6s;
}

@keyframes swim {
	0% {
		transform: translateX(0) rotateY(0);
	}

	45% {
		transform: translateX(calc(100cqmin - 100% - 20px)) rotateY(0);
	}

	50% {
		transform: translateX(calc(100cqmin - 100% - 20px)) rotateY(180deg);
	}

	95% {
		transform: translateX(0) rotateY(180deg);
	}

	100% {
		transform: translateX(0) rotateY(0);
	}
}

@keyframes bob {
	0% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(0);
	}

	85% {
		transform: translateY(-5px);
	}

	100% {
		transform: translateY(-5px);
	}
}

.swim-animation {
	animation: swim 30s linear infinite;
}

.bob-animation {
	animation: bob 4s ease-in-out alternate infinite;
}

.preview-target {
	container-type: inline-size;
}

.preview-target img {
	filter: grayscale(100%);
}

.preview-target[data-target="true"] img:first-child {
	filter: grayscale(0%);
}