/*tema de colores, se puede cambiar al gusto*/
:root {
	--background: black;
	--secondary: oklch(0.20 0.00 0);
	--foreground: oklch(0.51 0.23 277);
	--font-family: "VT323", monospace;
	/* --font-family: "Silkscreen", monospace; */
	--warning: #d79921;
	--success: #00ff41;
	--destructive: oklch(0.58 0.22 27);
}

*::-webkit-scrollbar {
	display: none;
}

html {
	font-family: var(--font-family);
	font-style: normal;
	view-transition-name: none;
}

h1 {
	font-weight: 800;
}

h1,
p {
	margin: 0;
}


body {
	color: var(--foreground);
	cursor: url('assets/images/cursor.cur'), auto;
	background-color: var(--background);
	overflow: hidden;
	padding: 0;
	margin: 0;
	position: relative;
}


.pony-glitch-flash {
	animation: flashIn 0.15s steps(2) forwards;
}

@keyframes flashIn {
	0% {
		opacity: 0;
		filter: invert(1);
		transform: translate(-2px, 2px);
	}

	50% {
		opacity: 1;
		text-shadow: 2px 0 red, -2px 0 cyan;
		transform: translate(2px, -2px);
	}

	100% {
		opacity: 1;
		filter: none;
		text-shadow: none;
		transform: translate(0, 0);
	}
}

.scanlines {
	position: fixed;
	inset: 0;
	height: 100vh;
	width: 100vw;
}

.scanlines-animation {
	animation: fade-in 1s ease forwards;
}

.scanlines::before {
	content: "";
	position: absolute;
	z-index: 999;
	display: block;
	pointer-events: none;
	height: 100vh;
	width: 100vw;
	background: linear-gradient(rgba(0, 0, 0, 0) 70%,
			rgba(0, 0, 0, 0.25) 70%);
	background-size: 100% 2px;
}

.pony-glitch-out {
	animation: flashOut 0.15s steps(1) forwards;
}

@keyframes flashOut {
	0% {
		filter: invert(1);
		text-shadow: -4px 0 red, 4px 0 cyan;
	}

	50% {
		opacity: 0;
		transform: scaleY(0.01);
	}

	100% {
		opacity: 0;
		display: none;
	}
}

.pony-glitch-flash {
	animation: flashIn 0.2s steps(2) forwards;
}

@keyframes flashIn {
	0% {
		opacity: 0;
		filter: invert(1);
		transform: translate(-4px, 4px);
	}

	50% {
		opacity: 1;
		text-shadow: 2px 0 red, -2px 0 cyan;
		transform: translate(4px, -4px);
	}

	100% {
		opacity: 1;
		filter: none;
		text-shadow: none;
		transform: translate(0, 0);
	}
}

.danger-cooldown {
	animation: systemStabilize 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
	pointer-events: none;
}

@keyframes systemStabilize {
	0% {
		opacity: 1;
		box-shadow: inset 0 0 50px rgba(0, 150, 255, 0.2);
	}

	100% {
		opacity: 0;
		box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
	}
}

.node-heal {
	animation: nodeRecover 1s ease-out forwards;
}

@keyframes nodeRecover {
	0% {
		color: #ff3333;
		text-shadow: 2px 0 0 rgba(255, 0, 0, 0.8);
	}

	50% {
		color: #ffffff;
		text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
	}

	100% {
		color: inherit;
		text-shadow: none;
	}
}

.danger-scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 998;
	background: radial-gradient(circle at center, transparent 60%, rgba(150, 0, 0, 0.08) 85%, rgba(50, 0, 0, 0.4) 100%);
	animation: heartbeatVignette 0.5s ease-in-out infinite alternate;
	view-transition-name: unique-outgoing-ident;
}

::view-transition-old(unique-outgoing-ident) {
	animation: fade-out 1s;
}

.danger-scanlines::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(255, 0, 0, 0.03) 50%);
	background-size: 100% 3px;
	animation: staticFlicker 0.1s steps(2) infinite;
}


@keyframes heartbeatVignette {
	0% {
		opacity: 0.7;
		box-shadow: inset 0 0 40px rgba(255, 0, 0, 0.1);
	}

	100% {
		opacity: 1;
		box-shadow: inset 0 0 120px rgba(200, 0, 0, 0.25);
	}
}

@keyframes staticFlicker {
	0% {
		opacity: 0.8;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.9;
	}
}

.nodeDanger {
	color: #ff3333;
	animation: textGlitch 0.2s steps(2) infinite alternate;
}

@keyframes textGlitch {
	0% {
		text-shadow: 2px 0 0 rgba(255, 0, 0, 0.8), -2px 0 0 rgba(0, 255, 255, 0.6);
	}

	100% {
		text-shadow: -2px 0 0 rgba(255, 0, 0, 0.8), 2px 0 0 rgba(0, 255, 255, 0.6);
	}
}


@keyframes noiseMove {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(-5%, -5%);
	}
}

#root {
	view-transition-name: game-container;
}

::view-transition-old(game-container) {
	animation: fade-out 0.3s ease-out forwards;
}

::view-transition-new(game-container) {
	animation: fade-in 0.3s ease-in forwards;
	animation-delay: 6s;
}

#root {
	view-transition-name: game-container;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes blink-caret {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

@keyframes fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*utilidades globales*/
.center-container {
	max-width: 100vw;
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	max-height: 100vh;
}

.flex-col {
	flex-direction: column;
}

.gap-1 {
	gap: 8px;
}

.gap-2 {
	gap: 16px;
}

.gap-3 {
	gap: 24px;
}

.gap-6 {
	gap: 6rem;
}

.bg-black {
	background-color: black;
}

.items-center {
	align-items: center;
	justify-content: center;
}

.container {
	max-width: 48rem;
}

.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
	align-items: baseline;
	gap: 1.2rem;
}

.truncate {
	max-width: 20rem;
	text-align: center;
}

.truncate-xl {
	max-width: 30rem;
	text-align: center;
}


.text-xl {
	font-size: 1.8rem;
}

.text-lg {
	font-size: 1rem;
}

.text-left {
	text-align: left;
}

.h-screen {
	height: 100vh;
	margin: 0;
	padding: 0;
}

.justify-between {
	justify-content: space-between;
}

.pr-12 {
	padding-right: 12rem;
}

.text-2xl {
	font-size: 2rem;
}

.text-3xl {
	font-size: 3rem;
}

.text-5xl {
	font-size: 6rem;
	font-weight: 700;
	line-height: 0.9em;
}

.text-4xl {
	font-size: 5rem;
	font-weight: 600;
	line-height: 0.9em;
}

.my-1 {
	margin: 8px 0;
}

.my-2 {
	margin: 16px 0;
}

.text-center {
	text-align: center;
}

.my-4 {
	margin: 32px 0;
}

.mx-1 {
	margin: 0 6px;
}


.mx-2 {
	margin: 0 16px;
}

.cinematic-splash {
	opacity: 0;
	transform: scale(0.95);
	filter: blur(8px);
	animation: aaaFadeInOut 4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	max-width: 250px;
}

/*de pony island*/
.pony-glow {
	color: #ffffff;
	text-shadow:
		0 0 2px rgba(255, 255, 255, 0.8),
		0 0 8px rgba(255, 255, 255, 0.6),
		0 0 15px rgba(255, 255, 255, 0.4);
}

.glitch-text {
	color: #ffffff;
	text-shadow:
		2px 0px 0px rgba(255, 0, 0, 0.7),
		-2px 0px 0px rgba(0, 255, 255, 0.7),
		0 0 8px rgba(255, 255, 255, 0.5);
	transition: text-shadow 0.1s ease-in-out;
}

.init {
	animation: titleBoot 0.8s ease-in-out forwards;
	opacity: 0;
	color: #ffffff;
}

@keyframes titleBoot {
	0% {
		opacity: 0;
		text-shadow: none;
	}

	5% {
		opacity: 1;
		text-shadow: 0 0 20px #fff, 0 0 40px #fff;
	}

	10% {
		opacity: 0;
	}

	15% {
		opacity: 1;
		text-shadow: 8px 0 0 rgba(255, 0, 0, 0.9), -8px 0 0 rgba(0, 255, 255, 0.9);
	}

	20% {
		opacity: 0;
	}

	25% {
		opacity: 1;
		text-shadow: -6px 0 0 rgba(255, 0, 0, 0.9), 6px 0 0 rgba(0, 255, 255, 0.9);
	}

	30% {
		opacity: 0;
	}

	40% {
		opacity: 1;
		text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
	}

	45% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}

	55% {
		opacity: 0.2;
	}

	60% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		text-shadow:
			2px 0px 0px rgba(255, 0, 0, 0.6),
			-2px 0px 0px rgba(0, 255, 255, 0.6),
			0 0 10px rgba(255, 255, 255, 0.4);
	}
}

.k27-intercept-container {
	position: relative;
	overflow: hidden;
	background: #000;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.k27-entity-kronos {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	font-size: 10rem;
	font-weight: 900;
	color: #ff0000;
	z-index: 1;
	opacity: 0;
	filter: blur(10px);
	transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
	pointer-events: none;
	mix-blend-mode: difference;
}

.k27-intercept-container:hover .k27-entity-kronos {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	filter: blur(0px);
	animation: kronosRage 0.15s infinite;
}

.k27-intercept-container:hover .k27-garbage-data {
	color: #555;
	transform: scale(1.02);
	filter: contrast(2) brightness(0.5);
}

@keyframes kronosRage {
	0% {
		clip-path: inset(10% 0 30% 0);
		transform: translate(-50.5%, -49.5%) scale(1.01);
	}

	20% {
		clip-path: inset(40% 0 10% 0);
		transform: translate(-49.5%, -50.5%) scale(0.99);
	}

	40% {
		clip-path: inset(20% 0 50% 0);
	}

	60% {
		clip-path: inset(50% 0 5% 0);
		transform: translate(-51%, -50%) scale(1.02);
	}

	80% {
		clip-path: inset(5% 0 70% 0);
	}

	100% {
		clip-path: inset(15% 0 25% 0);
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes nodeBoot {
	0% {
		opacity: 0;
		transform: scale(0.5);
		filter: brightness(5);
	}

	10% {
		opacity: 1;
		transform: scale(1.2);
		filter: brightness(10);
		text-shadow: 10px 0 0 #ff0000, -10px 0 0 #00ffff;
	}

	15% {
		opacity: 0;
		transform: scale(0.9);
	}

	25% {
		opacity: 1;
		transform: scale(1.1);
		text-shadow: -5px 0 0 #ff0000, 5px 0 0 #00ffff;
	}

	30% {
		opacity: 0;
	}

	45% {
		opacity: 1;
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: translate(2px, 0);
	}

	55% {
		transform: translate(-2px, 0);
	}

	60% {
		transform: translate(0, 0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.bug-line-critical {
	position: relative;
	display: block;
	background: rgba(255, 0, 0, 0.1);
	border-left: 3px solid #ff1111;
	padding-left: 8px;
	margin-left: -11px;
	/* animation: lineJumpGlitch 3s infinite; */
	cursor: help;
}

.k-tooltip {
	position: absolute;
	bottom: 120%;
	left: 10px;
	background: #050505;
	border: 1px solid #ff3333;
	border-left: 4px solid #00ffff;
	color: #e0e0e0;
	padding: 10px 15px;
	font-family: monospace;
	font-size: 0.9rem;
	line-height: 1.4;
	white-space: nowrap;
	z-index: 100;
	box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.k-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 20px;
	border-width: 6px;
	border-style: solid;
	border-color: #ff3333 transparent transparent transparent;
}

.bug-line-critical:hover .k-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.k-tooltip-title {
	color: #ff3333;
	font-weight: bold;
	margin-bottom: 5px;
	display: block;
	border-bottom: 1px solid rgba(255, 51, 51, 0.3);
	padding-bottom: 3px;
}

.k-tooltip-highlight {
	color: #00ffff;
	font-weight: bold;
}

.bug-text-glitch {
	display: inline-block;
	color: #ff3333;
	font-weight: bold;
	animation: textVibrate 0.2s steps(2) infinite;
}

@keyframes lineJumpGlitch {

	0%,
	90%,
	100% {
		transform: translateX(0);
		background: rgba(255, 0, 0, 0.1);
		border-left: 3px solid #ff1111;
	}

	92% {
		transform: translateX(-0.01px) skewX(-10deg);
		background: rgba(255, 51, 51, 0.3);
		border-left: 5px solid #fff;
	}

	94% {
		transform: translateX(4px) skewX(10deg);
	}

	96% {
		filter: invert(1);
	}
}

@keyframes textVibrate {
	0% {
		text-shadow: -2px 0 0 rgba(0, 255, 255, 0.8), 2px 0 0 rgba(255, 0, 0, 0.8);
		transform: translate(1px, -1px);
	}

	50% {
		text-shadow: 1px 0 0 rgba(0, 255, 255, 0.8), -1px 0 0 rgba(255, 0, 0, 0.8);
		transform: translate(-1px, 1px);
	}

	100% {

		text-shadow: -2px 0 0 rgba(0, 255, 255, 0.8), 2px 0 0 rgba(255, 0, 0, 0.8);
		transform: translate(1px, -1px);
	}
}

.dangerous-glow {
	color: #ff3333;
	text-shadow:
		0 0 4px rgba(255, 0, 0, 0.9),
		0 0 12px rgba(255, 60, 60, 0.7),
		0 0 25px rgba(255, 0, 0, 0.5),
		0 0 40px rgba(255, 0, 0, 0.3);
}

.dangerous-glitch {
	color: #ff1111;
	text-shadow:
		3px 0px 0px rgba(255, 255, 255, 0.8),
		-3px 0px 0px rgba(139, 0, 0, 1),
		0 0 15px rgba(255, 0, 0, 0.6);
	transition: all 0.05s steps(2);
}

@keyframes dangerousBoot {
	0% {
		opacity: 0;
		text-shadow: none;
		transform: scale(1.1);
	}

	5% {
		opacity: 1;
		text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000;
	}

	10% {
		opacity: 0;
		transform: skewX(-20deg);
	}

	15% {
		opacity: 1;
		text-shadow: 12px 0 0 rgba(255, 255, 255, 0.9), -12px 0 0 rgba(255, 0, 0, 0.9);
	}

	20% {
		opacity: 0;
		transform: skewX(20deg);
	}

	25% {
		opacity: 1;
		text-shadow: -10px 0 0 rgba(255, 255, 255, 0.9), 10px 0 0 rgba(139, 0, 0, 0.9);
	}

	30% {
		opacity: 0;
	}

	40% {
		opacity: 1;
		text-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
	}

	45%,
	55%,
	65% {
		opacity: 0.3;
	}

	50%,
	60%,
	70% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: scale(1);
		text-shadow:
			3px 0px 0px rgba(255, 255, 255, 0.1),
			-3px 0px 0px rgba(255, 0, 0, 0.1),
			0 0 12px rgba(255, 0, 0, 0.1);
	}
}

.init-dangerous {
	animation: dangerousBoot 1s steps(15) forwards;
	opacity: 0;
	color: #ff3333;
}

.node-init {
	opacity: 0;
	display: inline-block;
	animation: nodeBoot 0.6s ease-in-out forwards;
}

.node-exit {
	opacity: 1;
	display: inline-block;
	animation: nodeExit 0.6s ease-in-out forwards;
}

@keyframes nodeExit {
	0% {
		opacity: 1;
		transform: scale(0.5);
		filter: brightness(5);
	}

	10% {
		opacity: 0;
		transform: scale(1.2);
		filter: brightness(10);
		text-shadow: 10px 0 0 #ff0000, -10px 0 0 #00ffff;
	}

	15% {
		opacity: 1;
		transform: scale(0.9);
	}

	25% {
		opacity: 0;
		transform: scale(1.1);
		text-shadow: -5px 0 0 #ff0000, 5px 0 0 #00ffff;
	}

	30% {
		opacity: 1;
	}

	45% {
		opacity: 1;
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: translate(2px, 0);
	}

	55% {
		transform: translate(-2px, 0);
	}

	60% {
		transform: translate(0, 0);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

.node-init-danger {
	opacity: 0;
	display: inline-block;
	color: var(--destructive);
	animation: nodeDanger 0.5s ease-in-out forwards infinite;
	transition: all;
}

@keyframes nodeDanger {
	0% {
		transform: scale(0.9);
		opacity: 1;
		filter: brightness(5);
	}

	10% {
		transform: scale(1.1);
		filter: brightness(10);
		text-shadow: 10px 0 0 #ff0000, -10px 0 0 #00ffff;
	}

	15% {
		transform: scale(0.9);
	}

	25% {
		transform: scale(1.1);
		text-shadow: -5px 0 0 #ff0000, 5px 0 0 #00ffff;
	}


	45% {
		transform: scale(1);
		filter: brightness(1);
	}

	50% {
		transform: translate(2px, 0);
	}

	55% {
		transform: translate(-2px, 0);
	}

	60% {
		transform: translate(0, 0);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.pony-glow-active {
	text-shadow:
		0 0 5px #fff,
		0 0 10px #fff,
		2px 0 0 rgba(255, 0, 0, 0.7),
		-2px 0 0 rgba(0, 255, 255, 0.7);
}

.boot-p {
	visibility: hidden;
	animation: bootP 2s forwards;
}

@keyframes bootP {
	0% {
		visibility: hidden;
	}

	100% {
		visibility: visible;
	}
}

.glitch-text:hover {
	text-shadow:
		4px 0px 0px rgba(255, 0, 0, 0.9),
		-4px 0px 0px rgba(0, 255, 255, 0.9),
		0 0 12px rgba(255, 255, 255, 0.8);
}

@keyframes aaaFadeInOut {
	0% {
		opacity: 0;
		transform: scale(0.95);
		filter: blur(8px);
	}

	20% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}

	80% {
		opacity: 1;
		transform: scale(1.02);
		filter: blur(0px);
	}

	100% {
		opacity: 0;
		transform: scale(1.05);
		filter: blur(4px);
	}
}

.fade {
	animation-name: fade;
	animation-duration: 0.2s;
}

.delay {
	animation-delay: 1s;
}

.font-semibold {
	font-weight: 600;
}

.gap {
	margin: 2.5rem 0;
}

.description {
	font-size: 1.0rem;
}

/*class StartMenu*/

.dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	/* border: 1px solid var(--foreground); */
	padding: 1.8rem;
	gap: 0.6rem;
}

.loader-title {
	font-weight: 300;
	font-size: 2rem;
	margin: 0.8rem;
	letter-spacing: -0.05em;
	font-family: "Silkscreen", sans-serif;
	font-weight: 600;
}

.loader {
	width: 22rem;
	height: 1.8rem;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	background-color: var(--background);
	border: 0.2rem solid var(--foreground);
	padding: 0.2rem;
}

.loader-intern {
	height: 100%;
	width: 0%;
	background-color: var(--foreground);
	animation: loadIn 4s forwards, fade-out 0.2s 4s linear;
	transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0)
}

.start-button {
	width: 22rem;
	height: fit-content;
	font-family: "Silkscreen", sans-serif;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--background);
	font-size: 1rem;
	border: 1px solid var(--foreground);
	color: var(--foreground);
	padding: 0.6rem 1.2rem;
	transition: ease 0.10s;
}

.start-button:hover {
	background-color: var(--secondary);
}


@keyframes loadIn {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}

.loader-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	font-size: 1.0rem;
	margin: 4px 0px;
}

.start-title {
	font-weight: 700;
	font-size: 4rem;
	margin: 0;
	font-weight: 600;
}

.start-modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding: 1.8rem;
	gap: 0.6rem;
}

.start-footer {
	display: flex;
	justify-content: end;
	width: 100%;
	gap: 12px;
}

.continue-button {
	font-family: "Silkscreen", sans-serif;
	font-weight: 500;
	background-color: var(--background);
	font-size: 1.0rem;
	border: 1px solid var(--foreground);
	color: var(--foreground);
	padding: 0.6rem 1.2rem;
	transition: ease 0.10s;
}

.continue-button:hover {
	font-family: "Silkscreen", sans-serif;
	font-weight: 500;
	background-color: var(--foreground);
	border: 1px solid var(--foreground);
	color: var(--background);

	padding: 0.6rem 1.2rem;
}

.terminal {
	background-color: black;
	font-weight: 500;
	letter-spacing: 0.03em;
	margin: 2rem 0;
	font-size: 1rem;
	overflow-wrap: anywhere;
}

.success {
	color: var(--success);
}

.warning {
	color: var(--warning);
}

.encrypted-terminal {
	background-color: black;
	position: relative;
	padding: 2rem;
	margin: 2rem 0;
	font-size: 0.8rem;
	max-height: 300px;
	height: 300px;
	overflow-wrap: anywhere;
}

.text-hover {
	text-overflow: ellipsis;
}

.text-hover-container {
	text-overflow: ellipsis;
	animation: glitch-flicker 0.1s infinite;
	max-height: 400px;
	/* clip-path: circle(100px at -100% -100%); */
	position: absolute;
	-webkit-mask-image: radial-gradient(circle 150px at var(--mouse-x, -100%) var(--mouse-y, -100%),
			black 0%,
			rgba(0, 0, 0, 0.6) 40%,
			transparent 100%);
	mask-image: radial-gradient(circle 150px at var(--mouse-x, -100%) var(--mouse-y, -100%),
			black 0%,
			rgba(0, 0, 0, 0.6) 50%,
			transparent 100%);
	left: 0;
	top: 0;
	color: blue;
	z-index: 999;
	--noise-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyFAIFAAAA076uAAAAAXNSR0IArs4c6QAAAXVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0xNjoxMDoyNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmU6Y29tL3hhcC8xLjAvIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IChXaW5kb3dzKSIvPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8Locus5YAAAAwSURBVFhH7cExAQAAAMKg9U9tCy+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAXgMeQAFb5S9fAAAAAElFTKSuQmCC');
	line-height: 1.2;
}

@keyframes system-fault {
	0% {
		transform: translate(0, 0);
		filter: invert(0) contrast(1);
	}

	10% {
		transform: translate(-7px, -4px);
		filter: invert(1) hue-rotate(90deg);
	}

	20% {
		transform: translate(7px, 4px);
		clip-path: inset(10% 0 40% 0);
	}

	30% {
		transform: translate(-10px, 0);
		filter: contrast(200%);
	}

	40% {
		transform: translate(10px, -2px);
		clip-path: inset(50% 0 10% 0);
	}

	50% {
		transform: translate(-5px, 8px);
		background: rgba(255, 0, 0, 0.15);
	}

	100% {
		transform: translate(0, 0);
		filter: invert(0);
		clip-path: inset(0 0 0 0);
	}
}

.aaa-fault-active {
	animation: system-fault 0.4s steps(8) forwards;
	pointer-events: none;
}

@keyframes node-shatter {
	0% {
		transform: scale(1) rotate(0);
		filter: brightness(1);
	}

	30% {
		transform: scale(1.5) rotate(15deg);
		filter: brightness(5) drop-shadow(0 0 10px red);
	}

	100% {
		transform: scale(0) rotate(-45deg);
		opacity: 0;
		filter: blur(5px);
	}
}

.node-broken {
	animation: node-shatter 0.6s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

@keyframes glitch-flicker {
	0% {
		opacity: 1;
		transform: translate(0, 0);
	}

	10% {
		opacity: 0.8;
		transform: translate(-2px, 1px);
		color: #00ff00;
	}

	15% {
		opacity: 1;
		transform: translate(2px, -1px);
		color: #ff00ea;
	}

	20% {
		opacity: 0.9;
		transform: translate(0, 0);
	}

	100% {
		opacity: 1;
	}
}

.hidden-text-ascii {
	color: red;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 1rem;
	transform: translate(-50%, -50%);
	white-space: pre;
}

.encrypted-terminal:hover {
	cursor: none;
}


.terminal-parent {
	background: #050505;
}


.code {
	background-color: black;
	padding: 0.2rem;
	flex: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 2rem 0;
	margin-bottom: -0.5rem;
	height: fit-content;
	font-size: 1rem;
}

.code>pre {
	font-family: "JetBrains Mono", monospace;
	font-optical-sizing: auto;
	letter-spacing: -0.02em;
}

.input {
	font-family: "VT323", monospace;
	font-weight: 500;
	background-color: var(--background);
	width: 100%;
	border: none;
	color: white;
	padding: 0.6rem 1.2rem;
	transition: ease 0.10s;
	caret-color: white;
	caret-shape: block;
	text-transform: uppercase;
}

.kronos-hell-text {
	color: #ffffff;
	text-shadow:
		1px 0px 0px rgba(255, 0, 0, 0.7),
		-1px 0px 0px rgba(0, 255, 255, 0.0),
		0 0 8px rgba(255, 255, 255, 0.5);
	transition: text-shadow 0.1s ease-in-out;
}

@keyframes hellTextPulse {

	0%,
	100% {
		text-shadow:
			0 0 2px rgba(255, 51, 51, 0.3),
			1px 0 1px rgba(0, 255, 255, 0.2),
			-1px 0 1px rgba(255, 0, 255, 0.2),
			0 0 5px rgba(128, 0, 0, 0.15);
	}

	50% {
		text-shadow:
			0 0 3px rgba(255, 51, 51, 0.4),
			1.2px 0 1px rgba(0, 255, 255, 0.25),
			-1.2px 0 1px rgba(255, 0, 255, 0.25),
			0 0 7px rgba(128, 0, 0, 0.2);
	}
}

#level-prompt {
	transform: translateX(8px);
}

.input:focus {
	outline: none;
}

.level-footer-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 8px;
	margin: 0 auto;
}

.level-footer {
	margin: 0 auto;
	width: 100%;
}

.error {
	color: var(--destructive);
	font-size: 0.8rem;
}


.lives-container {
	position: absolute;
	top: 1rem;
	right: -1rem;
	scale: 0.6;
}

.lives {
	view-transition-name: lives;
}

.hint-container {
	position: absolute;
	bottom: 2rem;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	left: 1rem;
	font-size: 0.8rem;
}

/* TODO: poner un hover aqui mas malandro */
.hint-container:hover {
	cursor: pointer;
}

.hint-column {
	display: flex;
	flex-direction: column;
}

.status {
	position: absolute;
	top: 2rem;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	left: 1rem;
	font-size: 0.8rem;
}

.game-over-fade {
	animation: fade-in 0.15s ease-out forwards;
	opacity: 0;
	animation-delay: 3s;
}

.knob {
	background-color: var(--secondary);
	width: 3rem;
	height: 3rem;
	position: relative;
	border-radius: 100%;
	overflow: hidden;
	rotate: 0deg;
}


.knob:hover {}

.knob::after {
	content: "";
	background-color: white;
	width: 0.5rem;
	height: 1rem;
	right: 50%;
	transform: translate(50%, 0);
	top: 0;
	position: absolute;
}

.shaking {
	animation: skewXShaking 0.2s linear infinite;
	display: inline-block;
}


#terminal::-webkit-scrollbar {
	display: none;
}

@keyframes skewXShaking {
	0% {
		transform: skewX(-25deg) skewY(15deg);
	}

	5% {
		transform: skewX(25deg) skewY(250deg);
	}

	10% {
		transform: skewX(-25deg);
	}

	15% {
		transform: skewX(25deg);
	}

	20% {
		transform: skewX(0deg);
	}

	100% {
		transform: skewX(0deg);
	}
}

.mono {
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	letter-spacing: -0.025em;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

@keyframes brutal-shake {

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

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-6px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(6px);
	}
}

.shake-effect {
	animation: brutal-shake 0.3s cubic-bezier(.36, .07, .19, .97) both;
	color: var(--destructive, #ff3333);
}

@keyframes brutal-skew {

	0%,
	100% {
		transform: skewX(0deg);
	}

	20% {
		transform: skewX(-15deg);
	}

	40% {
		transform: skewX(15deg);
	}

	60% {
		transform: skewX(-5deg);
	}

	80% {
		transform: skewX(5deg);
	}
}

.skew-effect {
	animation: brutal-skew 0.4s ease-in-out both;
	text-shadow: 2px 0 red, -2px 0 blue;
}

@keyframes fatal-collapse {
	0% {
		transform: translate(0, 0) skew(0deg) scale(1);
		filter: blur(0px) hue-rotate(0deg);
		background-color: transparent;
		box-shadow: 0 0 0 rgba(255, 0, 0, 0);
	}

	5% {
		transform: translate(15px, -15px) skew(10deg) scale(1.05);
		background-color: rgba(255, 0, 0, 0.8);
		filter: blur(2px) invert(1);
		box-shadow: 0 0 50px rgba(255, 0, 0, 1);
	}

	15%,
	25%,
	35% {
		transform: translate(-20px, 10px) skew(-15deg);
		filter: blur(1px) hue-rotate(90deg);
		text-shadow: 3px 0 red, -3px 0 blue;
		background-color: rgba(255, 0, 0, 0.2);
	}

	20%,
	30%,
	40% {
		transform: translate(20px, -10px) skew(15deg);
		filter: blur(2px) hue-rotate(-90deg);
		text-shadow: -3px 0 red, 3px 0 blue;
	}

	50% {
		transform: translate(0, 0) skew(50deg) scaleY(0.1) scaleX(1.5);
		filter: blur(5px) invert(0);
		background-color: black;
		opacity: 1;
	}

	70% {
		transform: translate(0, 200px) scale(0);
		opacity: 0.5;
		filter: blur(10px);
	}

	100% {
		transform: translate(0, 0) scale(0);
		opacity: 0;
		z-index: 0;
		filter: blur(20px);
	}
}

.collapse-effect {
	animation: fatal-collapse 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	pointer-events: none;
	overflow: hidden;
}

.dead-session {
	color: #444 !important;
	text-shadow: none !important;
	pointer-events: none;
}

.dead-session input {
	color: #00ff41 !important;
}

.exit-code-success {
	color: #00ff41;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-weight: bold;
	margin-top: 1rem;
	background-color: #000;
	display: inline-block;
	padding: 2px 8px;
}

.status-container {
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 1.1rem;
	width: fit-content;
	padding: 0.75rem 1rem;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transition: color 0.15s ease, border-color 0.15s ease;
	margin-bottom: 1rem;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#status-label {
	margin: 0 0 0.5rem 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#status-bar {
	margin: 0;
	letter-spacing: 0.15em;
	line-height: 1;
}

.status-container.state-warning {
	--kronos-color: #d79921;
	border-color: #d79921;
}

.status-container.state-critical {
	--kronos-color: #cc241d;
	border-color: #cc241d;
}

.hidden {
	display: none;
}

.blink {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

@keyframes wiggle {
	0% {
		transform: skewX(24deg);
	}

	10% {
		transform: skewX(-8deg);
	}

	20% {
		transform: skewX(55deg);
	}

	30% {
		transform: skewX(-90deg);
	}

	40% {
		transform: skewX(29deg);
	}

	50% {
		transform: skewX(-90deg);
	}

	60% {
		transform: skewX(3deg);
	}

	70% {
		transform: skewX(-2deg);
	}

	80% {
		transform: skewX(1deg);
	}

	90% {
		transform: skewX(10deg);
	}

	100% {
		transform: skewX(0deg);
	}
}

.selected {
	animation: selected 3s ease infinite;
}

@keyframes selected {

	0%,
	50%,
	100% {
		background-color: color-mix(in oklch, var(--destructive), transparent 20%);
	}

	25%,
	75% {
		background-color: color-mix(in oklch, var(--destructive), transparent 90%);
	}
}

.placeholder {
	position: relative;
}

.placeholder::after {
	position: absolute;
	left: 0px;
	top: 0px;
	content: attr(data-placeholder);
	pointer-events: none;
	opacity: 0.6;
}

@keyframes glitch {
	0% {
		transform: translate(0);
	}

	20% {
		transform: translate(-5px, 5px);
		filter: hue-rotate(90deg);
	}

	40% {
		transform: translate(5px, -5px);
		filter: invert(1);
	}

	60% {
		transform: translate(-5px, 0);
	}

	80% {
		transform: translate(5px, 5px);
	}

	100% {
		transform: translate(0);
	}
}

.kernel-panic-overlay {
	background: rgba(255, 0, 0, 0.1);
	padding: 1rem;
	border: 1px solid var(--destructive);
	animation: fade-in 0.5s forwards;
}

.char {
	opacity: 0;
}

.simple-button {
	translate: -1.25rem 0;
}

.simple-button:hover {}

.simple-button:hover .char {
	opacity: 1;
}