@import url("/css/fonts.css");
@import url("/css/utility.css");

.console {
	background-color: var(--clr-console-bg);
	font-family: var(--font-monospace);
	font-size: 1rem;
	padding: 1rem;
	line-height: 1.25rem;
	margin-bottom: 1rem;
	position: relative;
	
	border: .25rem solid var(--clr-console-border);
	border-radius: 1rem;
	filter: drop-shadow(0 0 .375rem var(--clr-console-drop-shadow));

	/* Adapted from cyuucat.moe. */
	/* The scanlines should be above the text but I'm too lazy to fix it. */
	background-image: var(--clr-console-scanlines);
	background-size: auto .25rem;

	@media (prefers-reduced-motion: no-preference) {
		animation: scanlines 1.0s linear infinite;
	}

	& > :first-child { margin-top: 0; }
	& > :last-child { margin-bottom: 0; }

	& h2, & .vh2 {
		/* Reset styles from main.css */
		background: 0;
		border: 0;
		border-radius: 0;
		
		/* Actual custom styling */
		margin: 0;
		padding: 0;
		font-weight: bold;
		text-decoration: underline var(--clr-console-h-underline);
		left: 0;
		font-size: 2rem;
		line-height: 2rem;
		border-bottom: 0;
		margin-bottom: 1rem;
		width: unset;
		overflow: visible;
	}

	& h3, & .vh3 {
		/* Reset styles from main.css */
		background: 0;
		border: 0;
		border-radius: 0;

		/* Actual custom styling */
		margin: 0;
		padding: 0;
		font-weight: bold;
		left: 0;
		font-size: 1rem;
		text-decoration: underline var(--clr-console-h-underline);
		border-bottom: 0;
		margin-bottom: 1rem;
		width: unset;
	}

	& h4, & .vh4 {
		/* Reset styles from main.css */
		background: 0;
		border: 0;
		border-radius: 0;

		/* Actual custom styling */
		margin: 0;
		padding: 0;
		font-weight: bold;
		left: 0;
		font-size: 1rem;
		text-decoration: underline var(--clr-console-h-underline);
		border-bottom: 0;
		margin-top: 1rem;
		margin-bottom: 1rem;
		width: unset;
	}

	& .subtitle {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	& h-c h3 {
		text-decoration: none;
	}

	/*&::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 33%);
			background-size: auto;
		background-size: auto 5px;
		z-index: 9999;
		pointer-events: none;
		animation: scanlines-anim 1.0s linear infinite;
	}*/

	/*& ul, & ol { padding-left: 32px; }*/

	& p {
		all: revert;
	}

	& ul, & ol {
		margin-left: 2ch;
		padding-left: 2ch;
	}
	& ol {
		/*line-height: 1rem;*/
		margin-bottom: 1rem;
	}

	& li {
		all: revert;
		
		margin-bottom: 1rem;

		&::marker { content: "* "; font-weight: bold; }
		&.pro::marker { content: "+ "; color: var(--clr-console-li-pro);}
		&.mid::marker { content: "~ "}
		&.con::marker { content: "- "; color: var(--clr-console-li-con);}

		&:has(> details.collapsible-li)::marker {
			content: "* ";
		}

		& details.collapsible-li {
			all: revert;
			/*background: none;
			border: none;
			box-shadow: none;*/

			&::marker {
				content: "* "; font-weight: bold;
			}

			&::details-content {
				all: revert;
			}

			& > summary {
				cursor: pointer;
				border-bottom: none;
				display: block;
			}
		}
	}

	& a { font-weight: bold; }
	& a.a-secret { font-weight: normal; }
	& cite { font-weight: bold; }

	& kbd {
		background: none;
		font-weight: bold;
		border: 0;
		padding: 0;
		box-shadow: none;
	}

	& code {
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
		font-size: 1rem;
		margin-left: -0.0625rem;
		margin-right: -0.125rem;
	}

	& .cursor-blink {
		color: var(--clr-main);
		animation: cursor-blink 1.0s linear infinite;
	}

	& details.adventure-choice {
		all: unset;

		& > summary {
			cursor: pointer;
			border-bottom: none;
		}
	}
}

details.console {
	box-shadow: none;

	&::marker { content: none; }

	summary {
		border-bottom: none;
		cursor: pointer;
	}
}

a.console-prev-log-link {
	display: block;
	text-align: right;
	color: var(--clr-console-link);
	text-decoration: none;
	margin-right: 1.25rem;
	margin-top: -.5rem;
	margin-bottom: 1rem;
	font-family: monospace;

	&:hover {
		color: var(--clr-console-link-hover);
		text-decoration: underline var(--clr-console-link-hover);
	}
}

@keyframes scanlines {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 1rem; }
}

@keyframes cursor-blink {
	0% { opacity: 1; }
	49% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}



@media screen and (width < 38.75rem) { /* 620px */
	.console ul, .console ol {
		margin-left: 1ch;
		padding-left: 1ch;
	}
}