:root {
	--cursor-normal: url(/images/ui/arrow.png);
	--cursor-pointer: url(/images/ui/arrow.png);

	--color-gold: #887849;
	--color-yellow: #dbb74f;
	--color-save-yellow: #c8b46e;
	--color-placeholder-input: #494744;
	--color-save-grey: rgb(177, 174, 167);
}

@font-face {
	font-family: "Ubuntu-Regular";
	src: url("/fonts/ubuntu-regular.woff") format("woff");
}

@font-face {
	font-family: "Ubuntu-Mono-Regular";
	src: url("/fonts/ubuntu-mono-regular.woff") format("woff");
}

@font-face {
	font-family: "Dwarvenaxe";
	src: url("/fonts/dwarvenaxe.woff") format("woff");
}

@font-face {
	font-family: "Ubuntu-Light";
	src: url("/fonts/ubuntu-light.woff2") format("woff2"),
		url("/fonts/ubuntu-light.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

.dddsim-narrator-font {
	font-family: "Dwarvenaxe", sans-serif !important;

	font-size: 2.5vw !important;
  line-height: 1.1 !important;
}

/*styling scenes----------------------------------------------*/

#dddsim-container {
	display: flex;
	width: 98vw;
	height: 95vh;
	flex-direction: column;
	justify-content: flex-start;

	background-color: black;
}

.dddsim-main-title {
	font-family: "Dwarvenaxe", sans-serif !important;
	font-size: 6rem;
	font-weight: normal;
	-webkit-text-stroke: 2px black;

	position: absolute;
	top: 34%;/* position the top  edge of the element at the middle of the parent */
	left: 50%; /* position the left edge of the element at the middle of the parent */

	transform: translate(-50%, -50%);
	text-wrap: nowrap;
	overflow: visible;

	z-index: 50;
}

.dddsim-scene {
	position: relative;
	height: 89vh;
}

.dddsim-options-button {
	background-image: url(/images/ui/menu_button.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	position: absolute;
	left: 0;
	top: 0;

	height: 50px;
	width: 50px;

	z-index: 60;
}

.dddsim-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 20%;
	margin-left: auto;
	margin-right: auto;

	height: 50%;
	width: fit-content;
}

.close-modal-button {
	background-image: url(/images/ui/close_button_round.png);

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 5%;
	width: 5%;

	position: absolute;

	right: calc(8% + (8% / 100));
	top: calc(11% + (11% / 19));
}
#popup {
	background-image: url(/images/ui/popup_panel.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	height: calc(50vw / 1.4);
	width: 36vw;
	z-index: 70;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
}

.dddsim-popup-container {
	overflow-y: scroll;

	position: absolute;
	top: 36%;
	left: 19%;
	width: 58%;
	height: 35%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
.dddsim-popup-container > p {
	font-size: 150%;
	margin-bottom: 5%;
}

.dddsim-popup-buttons-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 6%;
	width: 100%;
}

.popup-button {
	font-size: 150%;
	padding: 2.5% 5%;
}
.dddsim-modal {
	position: absolute;
	margin-left: auto;
	margin-right: auto;

	background-size: 100% 100%;
	background-position: center;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 60;
}

.dddsim-settings-area {
	background-image: url(/images/ui/menu_panel.png);
	width: 60vw;
	height: calc(60vw / 1.2);
}

.dddsim-settings-area > .close-modal-button {
	right: 11.55%;
	top: 12%;
}

.settings-container {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	font-family: "Ubuntu-Light", sans-serif !important;
	color: var(--color-save-grey);
	font-weight: 300;
	font-size: 1.15rem;

	position: absolute;
	left: 25%;
	top: 28%;
	width: 50%;
	height: 50%;
}

.settings-row {
	display: flex;
	flex-direction: row;

	justify-content: space-between;
	align-items: center;
	max-height: 52px;
}

.settings-row.disabled {
	pointer-events: none;
}

.settings-row-info {
	cursor: not-allowed;
	filter: saturate(0);
}

.settings-content {
	width: 42%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.settings-content > span {
	flex-grow: 3;
	text-align: center;
}

.settings-icon {
	display: inline-block;
	width: 4em;
	height: 4em;

	margin: 0;
	padding: 0;

	background-size: cover;
	background-repeat: no-repeat;
}

.settings-icon:active {
	margin: 0;
	padding: 0;

	border-style: outset;
}

.settings-button-increase {
	background-image: url(/images/ui/menu_right_arrow.png);
}

.settings-button-increase:hover {
	background-image: url(/images/ui/menu_right_arrow_hover.png);
}

.settings-button-increase.disabled,
.settings-row.disabled .settings-button-increase {
	filter: none;
	background-image: url(/images/ui/menu_right_arrow_disabled.png);
}

.settings-button-increase.disabled:hover,
.settings-row.disabled .settings-button-increase:hover {
	background-image: url(/images/ui/menu_right_arrow_disabled_hover.png);
}

.settings-button-decrease {
	background-image: url(/images/ui/menu_left_arrow.png);
}

.settings-button-decrease:hover {
	background-image: url(/images/ui/menu_left_arrow_hover.png);
}
.settings-button-decrease.disabled,
.settings-row.disabled .settings-button-decrease {
	background-image: url(/images/ui/menu_left_arrow_disabled.png);
}
.settings-button-decrease.disabled:hover,
.settings-row.disabled .settings-button-decrease:hover {
	background-image: url(/images/ui/menu_left_arrow_disabled_hover.png);
}

.settings-checkbox {
	background-image: url(/images/ui/menu_checkbox_empty.png);
}
.settings-checkbox:hover {
	background-image: url(/images/ui/menu_checkbox_empty_hover.png);
}
.settings-checkbox.checked {
	background-image: url(/images/ui/menu_checkbox_checked.png);
}
.settings-checkbox.checked:hover {
	background-image: url(/images/ui/menu_checkbox_checked_hover.png);
}

.dddsim-saves-area, .dddsim-log-area {
	display: flex;
	flex-direction: column;

	background-image: url(/images/ui/saves_panel.png);

	width: 70vw; /* Adjust as needed */
	height: calc(70vw / 1.6); /* Maintain 1.4 aspect ratio */
}

.dddsim-saves-area * {
	color: var(--color-save-yellow);
}

.dddsim-saves-area[data-mode="load"] > h3::after {
	content: "Load Save";
}

.dddsim-saves-area[data-mode="save"] > h3::after {
	content: "New Save";
}

.dddsim-saves-area > h3, .dddsim-log-area > h3 {
	font-family: "Dwarvenaxe", sans-serif;
	font-weight: normal;
	font-size: 230%;
	position: absolute;
	left: 13%;
	top: 16%;
}

.dddsim-saves-container, .dddsim-log-container {
	position: absolute;

	width: 78%;
	height: 70%;
	left: 10%;
	top: 25.5%;

	overflow-y: scroll;
	overflow-x: hidden;
	/* This sets the size of the scrollbar to 16px wide */
	scrollbar-width: 16px; /* Standard for Firefox and others */
}

@supports (-moz-appearance: none) {
	.dddsim-saves-container, .dddsim-log-container {
		scrollbar-color: #cf2400 #171717; /* thumb and track colors for browsers that support it */
	}
}

.dddsim-saves-container::-webkit-scrollbar:hover,.dddsim-log-container::-webkit-scrollbar:hover {
	cursor: var(--cursor-pointer), auto;
}

/* Chrome, Edge, Safari and other WebKit/Blink browsers */
.dddsim-saves-container::-webkit-scrollbar, .dddsim-log-container::-webkit-scrollbar {
	width: 0.6vw; /* width of the scrollbar */
}

.dddsim-saves-container::-webkit-scrollbar-track, .dddsim-log-container::-webkit-scrollbar-track {
	background: url("/images/ui/scroll_gutter.png") repeat-y; /* Tiled image on the y axis */
	background-color: #171717; /* fallback color if the image is not loaded */
	background-size: contain;
	border: 1px solid #090909; /* border around the track */
}

.dddsim-saves-container::-webkit-scrollbar-thumb, .dddsim-log-container::-webkit-scrollbar-thumb {
	background-color: #464646; /* color of the thumb */
	border-radius: 25px;
	width: 15px;
}

.dddsim-saves-container::-webkit-scrollbar-button , .dddsim-log-container::-webkit-scrollbar-button {
	height: 5px; /* height of the arrow image */
	background-size: contain;
}

.dddsim-saves-container::-webkit-scrollbar-button:vertical:decrement, .dddsim-log-container::-webkit-scrollbar-button:vertical:decrement  {
	background-image: url("/images/ui/scroll_arrow_top.png"); /* turned arrow for the top */
}

.dddsim-saves-container::-webkit-scrollbar-button:vertical:increment, .dddsim-log-container:-webkit-scrollbar-button:vertical:increment  {
	background-image: url("/images/ui/scroll_arrow_down.png"); /* normal arrow for the bottom */
}

.dddsim-save-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;

	position: relative;

	width: 100%;
	height: 25%;
	margin-bottom: 1%;
}

.dddsim-save-wrapper.inactive {
	pointer-events: none;
}

.dddsim-save-wrapper:last-child() {
	margin-bottom: 0;
}

.dddsim-saves-area[data-mode="load"] .dddsim-save-wrapper[data-save="empty"] {
	display: none;
}

.dddsim-save-background {
	background-image: url(/images/ui/saveslot.png);
	background-size: 100% 100%;
	width: 75%;
	height: 100%;

	position: relative;
}

.dddsim-save-wrapper:hover .dddsim-save-background,
.dddsim-save-background:hover,
.dddsim-save-wrapper.active .dddsim-save-background {
	background-image: url(/images/ui/saveslot_hovered.png);
}

.dddsim-save-preview {
	background-size: 100% 100%;
	background-position: center;

	width: 6.5vw;
}

.dddsim-save-wrapper[data-save="empty"] .dddsim-save-preview {
	background-image: url(/images/ui/empty_save.png);

	height: calc(6.5vw / 1.31);
}

.dddsim-save-wrapper[data-save="empty"]:hover .dddsim-save-preview,
.dddsim-save-wrapper[data-save="filled"] .dddsim-save-preview,
.dddsim-save-wrapper[data-save="empty"].active .dddsim-save-preview {
	background-image: url(/images/ui/filled_save.png);
	height: calc(6.5vw / 0.934);
}

.dddsim-saves-area[data-mode="save"] .load-save-button {
	display: none;
}

.save-name-input {
	all: unset;
	position: absolute;

	font-family: "Dwarvenaxe", sans-serif;
	font-size: 175%;

	color: var(--color-save-yellow) !important;

	top: 27%;
	left: 5%;
	width: 66%;
	height: calc(48% * 0.75);
	transform: scaleY(1.25);

	padding: 1%;
	padding-left: 3.4%;
}

.dddsim-saves-area[data-mode="load"] .save-name-input {
	pointer-events: none;
}

.dddsim-save-wrapper[data-save="empty"] .dddsim-save-info-container {
	visibility: hidden;
}

.dddsim-save-info-container {
	position: absolute;
	top: 0;
	left: 76%;
	display: flex;
	flex-direction: column;
	justify-content: center;

	height: 100%;
}

.dddsim-save-info-container > p {
	margin: 0;
	padding: 0;
	color: var(--color-save-grey) !important;
}

.save-name-input::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: var(--color-placeholder-input) !important;
}
.save-name-input:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: var(--color-placeholder-input) !important;
}
.save-name-input::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: var(--color-placeholder-input) !important;
}
.save-name-input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--color-placeholder-input) !important;
}
.save-name-input::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--color-placeholder-input) !important;
}

.save-name-input::placeholder {
	/* Most modern browsers support this now. */
	color: var(--color-placeholder-input) !important;
}

.save-name-input:focus,
.save-name-input:focus-within {
	outline: none;
	color: var(--color-save-yellow) !important;
}

.dddsim-save-button {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 30%;

	width: 4%;
}

.dddsim-save-wrapper[data-save="empty"] .delete-save-button {
	visibility: hidden;
}

.dddsim-save-wrapper.active .delete-save-button {
	visibility: visible;
}

.delete-save-button {
	background-image: url(/images/ui/close_button.png);
}

.dddsim-save-wrapper:not(.active) .confirm-save-button {
	visibility: hidden;
}

.confirm-save-button {
	background-image: url(/images/ui/ok_button.png);
}

.dddsim-log-container {
	padding-right: 1%;
}

.dddsim-log-entry {
	margin-bottom: 1em;
}
.dddsim-log-entry-action {
	color:#918b8b;
}

.dddsim-choice-area {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: 60%;
	top: 7%;
	z-index: 60;
}

.dddsim-choice-button {
	padding: 1rem 2rem;

	font-family: "Dwarvenaxe", sans-serif !important;
	font-size: 3rem;
}

.dddsim-characters {
	/*background-image: url(/images/backgrounds/placeholder.png);*/
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;

	width: 100%;
	height: 100%;
}

.dddsim-characters-sprites {
	position: absolute;
	right: 0;
	left: 0;
	width: 90%;
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: flex-end;

	margin-left: auto;
	margin-right: auto;
}

.dddsim-sprite {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	height: 105%;
	width: 30%;
}

.dddsim-sprite:not(.talking) {
	height: 100%;
	filter: brightness(0.8);
}

.dddsim-animated-sprite.talking {
	animation: vibrating-talking 200ms linear 0ms 2 normal both;
}

.dismas-neutral {
	background-image: url(/images/characters/dismas/neutral.png);
}

.dddsim-talk-area {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 15px;
	margin-left: auto;
	margin-right: auto;

	height: 45%;
	width: 100%;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	z-index: 55;
}

.dddsim-talkbox {
	background-image: url(/images/ui/talkbox_notalk.png);
	background-size: 100% 100%;
	background-position: center;
	height: 100%;
	width: 50%;

	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
}

.dddsim-talkbox.leftspeaker {
	background-image: url(/images/ui/talkbox_left.png);
}

.dddsim-talkbox.rightspeaker {
	background-image: url(/images/ui/talkbox_right.png);
}

.dddsim-talkbox-nextbutton {
	background-image: url(/images/ui/next_icon.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	right: 3%;
    bottom: 6%;
    height: 16%;
    width: 8%;

	padding: 0;
	margin: 0;
	z-index: 50;
}

.dddsim-talkbox-textinput {
	display: flex;
	flex-direction: row;
	align-items: center;

	column-gap: 1rem;
}

.dddsim-talkbox-textinput > button {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	height: 50px;
	width: 50px;
}

#talkbox-text-input {
	color: var(--color-yellow);

	display: block;
	border: none;
	padding: 0;
	width: 22.5ch;
	background: repeating-linear-gradient(
			90deg,
			var(--color-gold) 0,
			var(--color-gold) 1ch,
			transparent 0,
			transparent 1.5ch
		)
		0 100%/22ch 2px no-repeat;
	font: 2.5rem "ubuntu-mono-regular", monospace !important;
	letter-spacing: 0.5ch;
}

#talkbox-text-input::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: var(--color-gold) !important;
}
#talkbox-text-input:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: var(--color-gold) !important;
}
#talkbox-text-input::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: var(--color-gold) !important;
}
#talkbox-text-input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--color-gold) !important;
}
#talkbox-text-input::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--color-gold) !important;
}

#talkbox-text-input::placeholder {
	/* Most modern browsers support this now. */
	color: var(--color-gold) !important;
}

input#talkbox-text-input:focus,
input#talkbox-text-input:focus-within {
	outline: none;
	color: white;
}

#random-textinput-button {
	background-image: url(/images/ui/random_button.png);
}

#confirm-textinput-button {
	background-image: url(/images/ui/ok_button.png);
}

.dddsim-talkbox-nametag {
	height: fit-content;
	background-color: black;

	position: absolute;
	top: 17%;
    left: -3%;

	padding: 0.5rem 1rem;
	margin: 0;

	font-family: "Dwarvenaxe", sans-serif !important;
	font-size: 190%
}

.dddsim-talkbox-area {
	position: absolute;
	top: 40%;
    left: 8%;

	overflow: hidden;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 81%;
	row-gap: 1rem;
}

.dddsim-talkbox-area > * {
	margin: 0;
	padding: 0;
}

#line {
	font-size: 1.85vw;
	align-self: flex-start;
	line-height: 1.3;
}

.text-yellow {
	color: var(--color-yellow);
}

.text-red {
	color: #cf2400
}

.text-pink {
	color: pink;
}

#input-textbox-panel + #line {
	padding-bottom: 0;
}

.dddsim-talkbox-side-menu {
    height: 68%;
    margin-bottom: 1.25%;
    width: fit-content;
    align-self: flex-end;
}

.dddsim-talkbox-menu-list {
	list-style-type: none;
	list-style-position: inside;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

}

.dddsim-talkbox-menu-item {
	font-family: "Dwarvenaxe", sans-serif !important;
	font-size: 150%;

	display: flex;
	justify-content: center;
	align-items: center;

	flex-grow: 1;

	height: fit-content;
}

.dddsim-talkbox-menu-item > p {
	padding: 0 1rem;
	margin: 0;
}

/*ui elements*/

.panel {
	background-image: url(/images/ui/small_box.png);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

button {
	background-color: none;
	border: none;

	cursor: var(--cursor-normal), auto;
}

button:not(.settings-icon):active {
	border: none;
	margin: 0;
	filter: brightness(2);
}

/*UTIL=====================================================*/

button {
	all: unset;
}

button:not(.settings-icon).disabled,
button.disabled * {
	cursor: not-allowed !important;
	filter: grayscale(1) brightness(0.5) !important ;

}

.enabled:not(.settings-icon) {
	cursor: var(--cursor-pointer), pointer;
}

.enabled:not(.settings-icon):hover {
	filter: brightness(1.6);
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;

	height: 100vh;
	width: 99vw;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 56;

	pointer-events: none;
	backdrop-filter: blur(1.5px);
}

/*STYLING DEFAULT SITE---------------------------------------------------------*/

body {
	font-family: "Ubuntu-Regular", sans-serif;
	font-size: 1vw;

	height: 100%;
	overflow-y: hidden;

	color: white;
	background-color: black;
}

body * {
	cursor: var(--cursor-normal), auto !important;
}

hr {
	width: 100%;
	color: white;
}

.title {
	display: inline;
	padding: 0;
	margin: 0;
}

.nav-container {
	display: inline-block;
	width: fit-content;
}

.nav-links {
	display: flex;
	flex-direction: row;
	flex-flow: row;
	justify-content: stretch;

	list-style-type: none;
	list-style-position: inside;

	margin: 0;
	padding: 0;
}

.nav-links > li {
	display: inline-block;

	background-color: black;

	border: white 1px solid;

	padding: 0.2rem 0.5rem;
}

.nav-links > li:hover {
	cursor: var(--cursor-pointer), auto;
	filter: brightness(1.5);
}

.nav-link {
	padding: 1rem;
}

.nav-link > a {
	height: 100%;
	width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
}

a:active {
	color: inherit;
}

.toggle {
	display: none !important;
}