:root {
	--screen-width: 960px;
	--screen-height: 540px;
	--true-canvas-width: 896px;
	--true-canvas-height: 512px;
	--gradient-speed: 50s;

	--game-over-banner-bgkd: #161616EE;
}

html {
	background: #000000;
	background-repeat: no-repeat;
	min-height: 100vh;
	opacity: 1;
	height: 100vh;
}

html.bg-black {
	background-color: #000000;
}

html.bg-1 {
	background: linear-gradient(-45deg, #1c102c, #2b0e2b, #091C2B, #002627);
 	background-size: 300% 250%;
 	animation:
  	gradientBG 12s ease-in-out infinite,
   	filterFadeIn 0s ease-in-out forwards;
}

html.bg-starpower {
	animation: bgAnotherFilter 4s ease-in-out infinite;
}

@keyframes bgAnotherFilter {
  0%   { filter: hue-rotate(0deg) brightness(1) saturate(2) contrast(1.1); }
  20%  { filter: hue-rotate(10deg) brightness(1.5) saturate(3) contrast(1.4); }
  40%  { filter: hue-rotate(-10deg) brightness(1.2) saturate(1.5) contrast(1.6); }
  60%  { filter: hue-rotate(12deg) brightness(1.8) saturate(3.5) contrast(1.2); }
  80%  { filter: hue-rotate(-6deg) brightness(1) saturate(2.5) contrast(1.8); }
  100% { filter: hue-rotate(2deg) brightness(1) saturate(2) contrast(1.1); }
}


html.bg-2 {
	background: linear-gradient(
		-45deg,
		#0d0621,
		#210d35,
		#3d0d2e,
		#0d1e3d,
		#0d2e2e
	);
	background-size: 400% 400%;
	animation:
		gradientBG0 13s ease-in-out infinite,
		brightnessPulse 4.5s ease-in-out infinite;
}
html.bg-3 {
	background: linear-gradient(-45deg, #1c102c, #2b0e2b, #0d3641, #003334);
	background-size: 300% 300%;
	animation: gradientBG 18s ease-in-out infinite;
}
html.bg-4 {
	background: linear-gradient(
		-45deg,
		#000814,
		#003566,
		#00b4d8,
		#3a0ca3,
	);
	background-size: 700% 700%;
	animation:
		bg4Gradient 12.5s ease-in-out infinite,
		bg4Filter 15.1s ease-in-out infinite;
}


@keyframes gradientBG {
	0% {
		background-position: 50% 30%;
	}
	50% {
		background-position: 100% 80%;
	}
	100% {
		background-position: 50% 30%;
	}
}

@keyframes gradient {
	0% {
		background-position: 50% 50%;
	}
	50% {
		background-position: 50% 60%;
	}
	75% {
		background-position: 50% 50%;
	}
	100% {
		background-position: 50% 50%;
	}
}

@keyframes filterFadeIn {
	from {
		filter: opacity(90%);
	}
	to {
		filter: opacity(100%);
	}
}

@keyframes brightnessPulse {
  0%, 100% {
  filter: brightness(1);
  }
  50% {
  filter: brightness(1.25);
  }
}

@keyframes bg4Gradient {
  0%   { background-position: 0% 0%; }
  12%  { background-position: 100% 50%; }
  25%  { background-position: 30% 100%; }
  38%  { background-position: 80% 20%; }
  50%  { background-position: 0% 80%; }
  63%  { background-position: 100% 100%; }
  75%  { background-position: 50% 0%; }
  88%  { background-position: 20% 60%; }
  100% { background-position: 0% 0%; }
}

@keyframes bg4Filter {
  0%   { filter: hue-rotate(0deg) brightness(1) saturate(2) contrast(1.1); }
  20%  { filter: hue-rotate(30deg) brightness(1.5) saturate(3) contrast(1.4); }
  40%  { filter: hue-rotate(-20deg) brightness(0.8) saturate(1.5) contrast(1.6); }
  60%  { filter: hue-rotate(50deg) brightness(1.8) saturate(3.5) contrast(1.2); }
  80%  { filter: hue-rotate(-40deg) brightness(0.9) saturate(2.5) contrast(1.8); }
  100% { filter: hue-rotate(0deg) brightness(1) saturate(2) contrast(1.1); }
}


@font-face {
	font-family: "Silkscreen";
	src: url("./fonts/Silkscreen-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Silkscreen";
	src: url("./fonts/Silkscreen-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Press Start 2P";
	src: url("./fonts/PressStart2P-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: "Silkscreen" !important;
	margin: 0;
	padding: 0;
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.85) 100%);
}

body.power-mode::after {
	opacity: 1;
}

canvas {
	outline: 0px solid #333;
	z-index: 0;
	position: absolute;
	top: calc(50vh - var(--true-canvas-height) / 2);
	left: calc(50% - var(--true-canvas-width) / 2);
	filter: blur(0);
	transition: transform 0.2s ease-out;
}

canvas#prerender-sprites-canvas {
	position: absolute;
	visibility: hidden;
	top: 0;
	left: 0;
}

button.copy-to-clipboard {
	position: absolute;
	background-color: #27a8f4;
	outline: 0px;
	border: 0px solid red;
	color: #111;
	top: 64px;
	padding: 0.5rem;
}

.instructions {
	background-color: #111;
	color: #A4A4A4;
	z-index: 1;
	position: absolute;
	top: calc(50vh + var(--screen-height) / 2);
	left: calc(50% - var(--screen-width) / 2 - 1px);
	width: 960px;
	text-align: center;
	padding: 0.5rem 0;
}
.instructions code {
	color: #EEE;
	background-color: #222;
	padding: 0.25rem;
}

#game-title-container {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	animation: titleMove 2s cubic-bezier(0.66, 0, 0.34, 1) forwards;
	animation-delay: 0.86s;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	z-index: 99999;
	transition: opacity 0.25s ease-out;
}

body.power-mode #game-title-container {
	opacity: 0.15 !important;
}

body.power-mode #das-arr-controls {
	opacity: 0.15;
}

#hud {
  opacity: 0;
  animation: hudFadeIn 0.5s ease forwards;
  animation-delay: 3s;
  font-family: "Press Start 2P";
  font-size: 0.75rem;
  line-height: 1.2rem;
}

#hit-points {opacity: 0}
#hit-points-value {opacity: 0}

@keyframes hudFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes titleMove {
	0% {
		top: 50%;
		transform: translateY(-50%);
		opacity: 0;
	}
	17%, 55% {
		top: 50%;
		transform: translateY(-50%);
		opacity: 1;
	}
	100% {
		top: 0;
		transform: translateY(0);
		opacity: 1;
	}
}

/* Tutorial is the blurb of text that floats over your cursor to tell you how to play */
#tutorial {
	pointer-events: none;
	opacity: 0;
	transition: 0.05s;
	position: absolute;
	top: calc(50vh - var(--screen-height) / 2 - 20px);
	left: calc(50vw - var(--screen-width) / 2 + 30px);
	transform: translate(0, 0);
	z-index: 99999;
}

.text {
	color: #FFF;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.control {
	width: 40px;
}

#das-arr-controls {
	position: absolute;
	top: calc(50vh + var(--true-canvas-height) / 2 + 8px);
	left: calc(50% - var(--true-canvas-width) / 2);
	width: var(--true-canvas-width);
	z-index: 99999;
	color: #FFF;
	font-family: "Silkscreen";
	font-size: 0.75rem;
	font-weight: 100;
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: opacity 0.25s ease-out;
}

#das-arr-controls #fps {
	margin-left: auto;
}

#das-arr-controls input {
	width: 40px;
	background: transparent;
	border: 1px solid #555;
	color: #FFF;
	font-family: "Silkscreen";
	font-size: 0.75rem;
	text-align: center;
}

#das-arr-controls input[type="radio"] {
	width: auto;
	border: none;
	accent-color: #FFF;
	cursor: pointer;
}

#control-mode-toggle {
	display: flex;
	gap: 0.5rem;
}

#music-toggle {
	border: 1px solid #555;
	background: #FFF;
	color: #000;
	font-family: "Silkscreen";
	font-size: 0.75rem;
	padding: 2px 8px;
	width: 100px;
	cursor: pointer;
}

.control-panel {
	position: absolute;
	visibility: hidden;
}

.credits {
	position: absolute;
	top: calc(50vh + var(--screen-height) / 2 - 20px);
	width: 100%;
	text-align: center;
	opacity: 0;
	pointer-events: none;
}

.credits p {
	font-weight: 100;
	margin: 0.5rem 0;
	padding: 0;
	color: #444;
}

.credits a {
	color: #b36200;
	text-decoration: underline;
}

/* Game Over Text Display */
#game-over-text {
	position: absolute;
	visibility: hidden;
	top: calc(25vh - 4rem);
	left: calc(0%);
	width: 100%;
	text-align: center;
	font-weight: 900;
	pointer-events: none;
	z-index: 99999;
	background-color: var(--game-over-banner-bgkd);
	padding: 1rem 0 !important;
	box-shadow: 0 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.game-over-text-title {
	font-size: 3rem;
	font-weight: 900
}
.game-over-text-subtitle {
	font-size: 1.5rem;
}
.keyboard-keys {
	color: #FFE100;
}

#game-over-grade {
	line-height: 0;
	font-size: 2rem;
	font-weight: 900;
	color: white;
}

#game-over-level-box {opacity: 0}
#game-over-time-box {opacity: 0}
#game-over-grade-box {opacity: 0}
#game-over-enter-box {opacity: 0}

@keyframes blinking {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#restart-enter {
  animation: blinking 1.5s ease-in-out infinite;
}

#leaderboard-container {
	position: absolute;
	visibility: hidden;
	top: calc(25vh + 8rem);
	left: 25%;
	width: 50%;
	border-radius: 8px;
	text-align: center;
	z-index: 99999;
	background-color: var(--game-over-banner-bgkd);
	padding: 1rem 0;
	box-shadow: 0 4px 4px 8px rgba(0, 0, 0, 0.2);
	font-family: "Press Start 2P";
	pointer-events: auto;
}

.lb-panel { display: none; }
#leaderboard-container[data-phase="PROMPT_USERNAME"] #username-prompt-box { display: block; }
#leaderboard-container[data-phase="SUBMITTING"]      #leaderboard-status   { display: block; }
#leaderboard-container[data-phase="FETCHING"]        #leaderboard-status   { display: block; }
#leaderboard-container[data-phase="SHOWING_BOARD"]   #leaderboard-board    { display: block; }
#leaderboard-container[data-phase="ERROR"]           #leaderboard-error    { display: block; }

#username-prompt-box .lb-prompt-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
#username-input {
	font-family: "Press Start 2P";
	font-size: 1.25rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #FFE100;
	color: #FFF;
	text-align: center;
	width: 14ch;
	text-transform: uppercase;
	caret-color: #FFE100;
	outline: none;
	padding: 0.25rem 0.5rem;
}
#username-hint {
	font-size: 0.625rem;
	margin-top: 0.5rem;
	color: #AAA;
}

#leaderboard-status {
	font-size: 1rem;
	color: #AAA;
	padding: 1rem 0;
	animation: blinking 1.5s ease-in-out infinite;
}

#leaderboard-header {
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: center;
	gap: 1rem;
	align-items: baseline;
}
#leaderboard-view-label { color: #FFE100; }
#leaderboard-rank-label { color: #FFF; }
.leaderboard-toggle-hint { color: #AAA; font-size: 0.625rem; }

#leaderboard-table {
	margin: 0.25rem auto 0.5rem auto;
	border-collapse: collapse;
	font-family: "Press Start 2P";
	font-size: 0.75rem;
	color: #FFF;
}
#leaderboard-table th {
	color: #AAA;
	font-weight: normal;
	padding: 0.25rem 0.75rem;
	text-align: center;
}
#leaderboard-table td {
	padding: 0.25rem 0.75rem;
	text-align: center;
}
#leaderboard-table td.lb-name {
	text-align: left;
	max-width: 10ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#leaderboard-table tr.lb-row-me {
	background: rgba(255, 225, 0, 0.15);
	color: #FFE100;
}
#leaderboard-table tr.lb-row-me td.lb-name { color: #FFE100; }

#leaderboard-table td.lb-grade-AAA { color: white; }
#leaderboard-table td.lb-grade-AA  { color: ivory; }
#leaderboard-table td.lb-grade-A   { color: gold; }
#leaderboard-table td.lb-grade-B   { color: orange; }
#leaderboard-table td.lb-grade-C   { color: brown; }
#leaderboard-table td.lb-grade-D   { color: darkslategray; }

#leaderboard-footer {
	font-size: 0.75rem;
	margin-top: 0.75rem;
	animation: blinking 1.5s ease-in-out infinite;
}

#leaderboard-error {
	color: #FF6666;
	font-size: 0.875rem;
	padding: 1rem 0;
}
#leaderboard-error-msg { margin-bottom: 0.5rem; }
.lb-error-hint {
	color: #AAA;
	font-size: 0.625rem;
}