/* Copyright (C) 2026 ProjectRootProxy, www.projectrootproxy.com */
:root {
	--bg-dark:   black;
	--bg-panel:  #001000;
	--border:    2px solid #034603;
	--text:      #00FF00;
	--text-2:   #108620;
	--text-3:   #0CC125;
	--text-4:   #0ADF27;
	--green:    #022502;
	--green-2:  #023302;
	--green-3:  #034A03;
	--selected:  #023302;
	--active:    #023F02;
	--mobile-dim: #012301;
	--mobile-hover: #024402;
	--mobile-active: #025E02;
	--double-shadow: inset 0 0 12px var(--green), 0 0 15px 2px var(--green);
	--bold-color: #05DC1C;
	--font: "Courier New", Courier, monospace;
}

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
}

.underline {
	text-decoration: underline solid 1px #064F0A;
}

.location {
	font-weight: bold;
	color: var(--bold-color);
	text-shadow: 
		0 0 2px var(--green-3),
		0 0 4px var(--green-3),
		0 0 8px var(--green-3);
}

.dialogue {
	color: var(--bold-color);
	text-shadow:
		0 0 2px var(--green-3),
		0 0 4px var(--green-3),
		0 0 8px var(--green-3);
}

html, body {
	overflow-y: hidden;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: var(--bg-dark);
	color: var(--text);
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
	line-height: 1.35;
	display: flex;
	justify-content: center;
	user-select: none;
}

html {
	cursor: url("imgs/cursor.png") 0 0, auto;
	text-shadow:
		0 0 4px var(--green-3),
		0 0 8px var(--green-3),
		0 0 16px var(--green-3),
		0 0 20px var(--green-3);
}
body { 
	padding: 10px; 
}

div, h1, h2, h3, span, strong, i, li, p {
	font-family: var(--font);
}

.text-1 {
	font-family: var(--font);
	color: var(--text);
}

.text-2 {
	font-family: var(--font);
	color: var(--text-2);
}

.text-3 {
	font-family: var(--font);
	color: var(--text-3);
}

.text-4 {
	font-family: var(--font);
	color: var(--text-4);
}

.w-border {
	border: var(--border);
	padding: 8px;
	margin-bottom: 5px;
	margin-top: 0;
	box-shadow: 0 0 15px 5px var(--green);
}


.w-border * {
	margin: 0;
}

.toggle-row:hover .toggle-outer {
  background-color: #06440F;
}

/* ------------------------------------------------------------------ */

.terminal {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: black;
	outline: var(--border); 
	box-shadow: 0 0 15px 5px var(--green);
}

.top-bar {
	min-height: 42px;    
	background-color: var(--bg-panel);
	padding: 4px 8px;
	border-bottom: var(--border); 
	box-shadow:
		inset 0 0 12px var(--green),
		0 0 15px 2px var(--green);
}

#main_panel {
	flex: 1 1 0;
	background-color: var(--bg-panel);
	padding-top: 0;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 0;
	overflow-y: hidden;
	border-bottom: var(--border);
	box-shadow: inset 0 0 12px var(--green);
	display: flex;
}

#normal_mode_btns {
	background-color: var(--bg-panel);
	padding: 8px;
	overflow-y: auto;
	box-shadow: inset 0 0 12px var(--green);

	width: 100%;
	display: flex;
	justify-content: space-around;

	overflow: hidden;
}

#modes {
	display: flex;
}

.desktop-mode-btn {
	flex: 1 1 0;
	white-space: pre;
}
.desktop-mode-btn:nth-of-type(n+2) {
	margin-left: 4px;
}
.desktop-mode-btn:not(:last-child) {
	margin-right: 4px;
}

.desktop-mode-btn {
	transition: background-color .15s;
	padding: 0 8px;
}
.desktop-mode-btn:hover,
.mode-btn-clicked {
	background-color: var(--selected);
	box-shadow: inset 0 0 20px var(--green-2);
}
.mode-btn-clicked {
	/*font-weight: bold;*/
}
.desktop-mode-btn:active {
	background-color: var(--active);
	box-shadow: inset 0 0 20px var(--green-2);
}

/* scroll */
::-webkit-scrollbar { 
	width: 32px; 
	min-width: 32px; 
	background-color: #000F00; 
}
::-webkit-scrollbar-thumb { 
	background-color: var(--selected); 
	border-radius: 0; 
}

::-webkit-scrollbar-thumb:hover {
  background: #064009;
}

#portrait_mode_btns {
	background-color: var(--bg-panel);
	padding: 8px;
	overflow: hidden;
	box-shadow: inset 0 0 12px var(--green);
	display: none;
	width: 100%;
	flex-direction: column;
}

.crt-overlay-cont {
	pointer-events: none;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.crt-overlay-layers-cont {
	position: relative;
	width: 100%;
	height: 100%;
}

.crt-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.screen {
	mix-blend-mode: screen;
}

.multiply {
	mix-blend-mode: multiply;
}

.portrait-info-standalone {
	width: 25px;
	height: 100%;
	background: red;
	margin-left: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--mobile-dim);
}

.w-button {
	background-color: var(--mobile-dim);

}

.portrait-mode-btn {
	display: none;
	white-space: pre;
	overflow: hidden;
	padding: 0 0 0 8px;
	margin: 0;
	line-height: 1.2;
	background-color: var(--mobile-dim);
}

.portrait-mode-btn:hover, .portrait-info-standalone:hover, .w-button:hover {
	background-color: var(--mobile-hover);
}

.portrait-mode-btn:active, .portrait-info-standalone:active, .w-button:hover {
	background-color: var(--mobile-active);
}

.portrait-info-standalone.disable-hover:hover, .portrait-info-standalone.disable-hover:active {
	background-color: var(--mobile-dim);
}

/* ---------- modes main contents ------------ */

.mode-main-conts h3 {
	margin: 0 0 15px 0;
	padding: 0;
}

.mode-main-conts ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.mode-main-conts {
	padding-right: 8px;
}

#mp_lookat {
	flex-direction: column;
}

.mb-20 {
	margin-bottom: 20px;
}

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

.fade-out {
	animation: fade-out-frames 200ms forwards;
}



#item_removed_popup_cont {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#item_removed_popup_cont .popup-box {
	width: 50%;
	min-height: 15%;
	background-color: #032103;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding:10px;
	border: solid 2px #033406;
}

#items_removed_continue_btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	background-color: #094110;
}

#items_removed_continue_btn:hover {
	background-color: #0C5E16;
}

#items_removed_continue_btn:active {
	background-color: #094110;
}


/* -------------------------------------------------------------------------  */
/* --------       start screen         ----  */

.start-page-cont {
	padding: 0 15%;
}

.start-btn-conts {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	padding: 8px;
}

.start-btns {
	width: 100%;
	display: flex;
	justify-content: center;
}


.display-none {
	display: none;
}

.action-choices {
	padding: 4px 8px; 
	margin-top: 10px;
}

.items-as-pickup {
	margin-bottom: 10px;
}

.items-as-inv {
	margin-bottom: 10px;
}

/* -------------------------------------------------------------------------  */
/* --------------- media queries ----------------------  */

@media (max-aspect-ratio: 10/10), (max-width: 632px) {
	body {
		padding: 5px; 
		font-size: 32px;
	}
	.top-bar {
		min-height: 30px;
	}

	#normal_mode_btns {
		display: none;
	}
	#portrait_mode_btns { 
		display: flex;
	}
	::-webkit-scrollbar { 
		width: 48px; 
		min-width: 48px; 
	}

	.portrait-mode-btn {
		display: block;
	}

	.start-page-cont {
		padding: 0 8%;
	}

	.portrait-mode-btn {
		font-size: 40px;
	}

	#portrait_mode_info_standalone_btn {
		width: 55px;
	}

	#drone_cont {
		display: block;
	}

	.action-choices {
		padding: 4px; 
		margin-top: 50px;
	}

	.items-as-pickup {
		margin-bottom: 50px;
	}

	.items-as-inv {
		margin-bottom: 50px;
	}

	#item_removed_popup_cont .popup-box {
		width: 80%;
		min-height: 40%;
	}
}

@media (max-aspect-ratio: 6/10) { 
	body {
		padding: 0; font-size: 38px;
	} 

	.portrait-mode-btn {
		font-size: 70px;
	}

	.start-page-cont {
		padding: 0 3%;
	}

	#portrait_mode_info_standalone_btn {
		width: 65px;
	}
}