/* RESET */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, a, em, img,
small, strike, strong, sub, sup, tt, var,
ol, ul, li,
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

/* GLOBALS */
@font-face {
	font-family: 'milkjf';
	/* src: url(pc-9800.ttf);*/
	src: url("x68000_sans.ttf");
}

* {
    box-sizing: border-box;
    user-select: none;
}

:root {
    --text:white;
	--border:white;
	--accent:red;
	--panel-bg: rgba(0,0,0,0.5);
	--history-bg: rgba(0,0,0,0.9);
    
	--margin: 0.5rem;
    --border-width: 1px;
    --padding: 1rem;
    
	--letter-spacing: 0.15vw;
}

html,
body,
#container,
#loadingscreen {
    width: 100%;
    height: 100%;
}

html {
    font-size: 20px;
    font-family: 'milkjf', 'monospace';
}

body {
	font-size: max(1.5vw, 20px);
    background-color: black;
    overflow: hidden;
}

#loadingscreen {
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 10%;
    z-index: 100;
}

#loadingscreen:has(#loadingline-done) {
    cursor: pointer;
}

#container.standard {
    background-image: url("images/BG_TEXTURE1.png");
	background-repeat: repeat;
}

#container.fullBG {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.hidden {
    display: none;
}

/* MAIN VIEW */
#main {
    height: 100%;
    max-height: 55%;
    display: flex;
}

#bg1 {
    width: 70%;
    border: var(--border-width) solid white;
    background-size: cover;
    background-position: center;
    margin: var(--margin);
    text-align: right;
}

#fg1 {
	display: block;
	margin-left: auto;
	margin-right: auto;
    height: 100%;
    background-color: transparent;
    filter: drop-shadow(2px 2px 2px #1908255b);
}

#sidebar {
    width: 30%;
    margin: var(--margin);
    margin-left: 0;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--margin);
}

#choicewindow, #statuswindow {
	color: var(--text);
	border: var(--border-width) solid var(--border);
	background-color: var(--panel-bg);
    width: fit-content;
    height: fit-content;
}

#statuswindow {
    padding: var(--padding);
}

#choicelist {
    width: 100%;
    padding: var(--padding);
	margin: 0;
    list-style-type: decimal;
    list-style-position: inside;
}

.choiceListItem {
	color: var(--text);
	text-decoration: none;
}

.choiceListItem:hover {
  color: var(--accent);
  cursor: pointer;
}

/* DIALOGUE BOX */
#dial {
    height: 100%;
    max-height: 40%;
    background-color: var(--panel-bg);
    border: 2px solid var(--border);
    margin: var(--margin);
    margin-top: 0;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding);
}

#dial.transparent {
	background-color:transparent;
	border:none;
}

.dialog {
    width: 100%;
    display: flex;
}

.dialogue-speaker {
    display: inline-block;
    min-width:8%;
}

.dialogue-text {
	display: inline-block;
	color: #F1F1F1;
	text-align: left;
	overflow-wrap: break-word;
    max-width: 90%;
}

/* MENUS + BUTTONS */
#menus {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

#menu-buttons {
    height: 100%;
    max-height: 5%;
    display: flex;
    justify-content: space-between;
    margin: var(--margin);
    margin-top: 0;
    align-items: flex-start;
}


#menu-buttons span {
    display: flex;
    gap: 0.75rem;
}

#menu-buttons div {
    color: var(--text);
}

#menu-buttons .open-menu {
    color: var(--accent);
}

#menu-buttons div:hover {
    color: var(--accent);
    cursor: pointer;
}

#messagecontainer {
    pointer-events: auto;
	color: var(--text);
	background-color: rgba(0,0,0,0.9);
	border: var(--border-width) solid var(--border);
	overflow-y: scroll;
	padding: var(--padding);
	text-align: left;
 	width: 80%;
	height: 80%;
    z-index: 90;
    scrollbar-color: var(--text) transparent;
}

#settings-menu {
    border: var(--border-width) solid var(--border);
	background-color: var(--panel-bg);
	color: #fff;
	padding: var(--padding);
    min-width: 20%;
    pointer-events: auto;
    z-index: 90;
}

#settings-menu input[type="range"] {
    appearance: none;
    width: 100%;
    height: 10px;
    background-color: transparent;
    outline: none;
}

#settings-menu input[type="range"]:hover {
    cursor: pointer;
}

#settings-menu input[type="range"]::-webkit-slider-thumb,
#settings-menu input[type="range"]::-moz-range-thumb  {
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--text);
}

#settings-menu input[type="range"]::-webkit-slider-runnable-track,
#settings-menu input[type="range"]::-moz-range-track {
    background: var(--text);
}

#settings-menu input[type="range"]::-moz-range-progress {
    background: var(--accent);
}

#save-menu {
	pointer-events: auto;
	min-width: 20%;
	z-index: 90;
	border: var(--border-width) solid var(--border);
	background-color: var(--panel-bg);
	color: #fff;
	padding: var(--padding);
}

#save-menu div:hover {
    color: var(--accent);
    cursor: pointer;
}

/* MEDIA QUERIES */
@media (max-height: 700px) {
    #dial {
        margin-bottom: 0.10rem;
    }

    #menu-buttons {
        font-size: 0.75rem;
    }
}
}

/* CRT TOOLS */
@keyframes flicker {
	0% {
		opacity: 0.27861;
	}

	5% {
		opacity: 0.34769;
	}

	10% {
		opacity: 0.23604;
	}

	15% {
		opacity: 0.90626;
	}

	20% {
		opacity: 0.18128;
	}

	25% {
		opacity: 0.83891;
	}

	30% {
		opacity: 0.65583;
	}

	35% {
		opacity: 0.67807;
	}

	40% {
		opacity: 0.26559;
	}

	45% {
		opacity: 0.84693;
	}

	50% {
		opacity: 0.96019;
	}

	55% {
		opacity: 0.08594;
	}

	60% {
		opacity: 0.20313;
	}

	65% {
		opacity: 0.71988;
	}

	70% {
		opacity: 0.53455;
	}

	75% {
		opacity: 0.37288;
	}

	80% {
		opacity: 0.71428;
	}

	85% {
		opacity: 0.70419;
	}

	90% {
		opacity: 0.7003;
	}

	95% {
		opacity: 0.36108;
	}

	100% {
		opacity: 0.24387;
	}
}

@keyframes textShadow {
	0% {
		text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	5% {
		text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	10% {
		text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	15% {
		text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	20% {
		text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), -1.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	25% {
		text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	30% {
		text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	35% {
		text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), -2.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	40% {
		text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), -2.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	45% {
		text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	50% {
		text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	55% {
		text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	60% {
		text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	65% {
		text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	70% {
		text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	75% {
		text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	80% {
		text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	85% {
		text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	90% {
		text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	95% {
		text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}

	100% {
		text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
}

.crt::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	pointer-events: none;
}

.crt::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
}

.crt {
	animation: textShadow 5.6s infinite;
}