/*#region Base */

:root {
    --col-main: hsl(41, 100%, 87%);
	--col-main-dim: hsl(41, 62%, 70%, 50%);
	--col-alt: hsl(41, 100%, 95%);
    --col-background: hsla(0, 0%, 0%, 0.67);

	--transition-speed-fast:   0.25s;
	--transition-speed-medium: 0.38s;
	--transition-speed-slow:   0.50s;

	--corner-radius: 0.33em;
	--corner-radius-big: 0.67em;
}

@font-face {
	/* Metrophobic by Vernon Adams - https://fonts.google.com/specimen/Metrophobic
	Converted to WOFF2 */
	font-family: "Metrophobic";
	src: url("./fonts/Metrophobic-Regular.woff2") format('woff2');
}

html {
    --screen-size: calc(sqrt(100vh) * sqrt(100vw) / 1440px); /* sqrt(1920) * sqrt(1080) = 1440 */
	--font-size-const: 0.6;
	--font-size: round(nearest, calc((3.20vmin + 2px) * var(--font-size-const)), 4px);

    font-family: 'Metrophobic', Verdana, Geneva, Tahoma, sans-serif;
    font-size: var(--font-size);

	color: var(--col-main);
    background-color: hsl(0, 0%, 4%);
	scrollbar-color: var(--col-main) var(--col-background);

	scroll-behavior: smooth;
	box-sizing: border-box;
}
@media (orientation: portrait) {
	html {
		--font-size: round(nearest, calc((4vmin + 2px) * var(--font-size-const)), 2px);
	}
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

main {
	width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/*#endregion*/

/*#region Background */

/* Pseudo-elements defaults */
html::before,
html::after,
body::before {
	content: "";
	position: fixed;
	inset: 0;
}

/* Base pattern layer */
html::before {
	z-index: -3;

	background: url("./img/stars.webp") repeat;
	background-size: 25vw;
}

/* Animated flickering layer */
html::after {
	z-index: -2;

	background: url("./img/stars_mirrored.webp") repeat;
	background-size: 25vw;

	animation: BkgFlickering 15s infinite linear;
}
@keyframes BkgFlickering {
	0%, 100% { opacity: 0.0; }
	25%, 75% { opacity: 0.5; }
	50%      { opacity: 1.0; }
}

/* Scaling in portrait mode */
@media (orientation: portrait) {
	html::before,
	html::after {
		background-size: 50vh;
	}
}

/* Background dimming */
body::before {
	z-index: -1;
	
	background: rgba(0, 0, 0, 33.3%);
}

/*#endregion*/

#simCanvas {
	touch-action: none;
}

/* UI class (for fade out) */
.ui {
	opacity: 1;
	transition: opacity var(--transition-speed-slow);

	&.hidden {
		opacity: 0;
	}
}

/*#region UI bars */

.barWrapper {
	display: flex;
	flex-wrap: wrap;
}

.bar {
	position: absolute;

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

	width: 100%;
	padding: 0.5em;

	background-color: var(--col-background);

	border-style: solid;
	border-color: var(--col-main);
	border-width: 0;

	&.top {
		top: 0;
		border-bottom-width: 1px;
	}

	&.bottom {
		bottom: 0;
		border-top-width: 1px;
	}

	&.small {
		width: auto;
	}

	&.left {
		left: 0;
		border-right-width: 1px;
		border-bottom-right-radius: var(--corner-radius);
	}

	&.right {
		right: 0;
		border-left-width: 1px;
		border-bottom-left-radius: var(--corner-radius);
	}
}
@media (orientation: portrait) {
	.bar {
		flex-direction: column;
	}
}

.group {
	z-index: 1;

	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
}
@media (orientation: portrait) {
	.group {
		justify-content: center;
	}
}

/*#endregion*/

/*#region Side panels */

.sidePanel {
	--panel-height: 25em;

	position: absolute;
	top: 50%;

	display: flex;
	flex-direction: column;

	padding: 0.25em;

	background-color: var(--col-background);

	border: 1px solid var(--col-main-dim);
	border-radius: var(--corner-radius);

	transform: translateY(calc(-0.6 * var(--panel-height)));

	&.left {
		left: 0;
		border-left-width: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	&.right {
		right: 0;
		border-right-width: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.panelContent {
	overflow-y: auto;
	width: 22.5em;
	height: var(--panel-height);
	
	padding: 0.5em;

	transition: var(--transition-speed-fast);

	&.closed {
		overflow: hidden;
		width: 0;
		height: 0;
		padding: 0;
	}
}
@media (orientation: portrait) {
	.panelContent {
		width: 15em;
	}
}

/*#endregion*/

/*#region Navigation tree */

.tree {
	--spacing: round(down, 1.25em, 2px);
	--radius: 0.2em;
	--color: var(--col-main);
	padding-inline-start: 0;
	user-select: none;
}

.tree li {
	display: block;
	position: relative;
	padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
	margin-left: calc(var(--radius) - var(--spacing));
	padding-left: 0;
}

.tree ul li {
	border-left: 2px solid var(--color);
}

.tree ul li:last-child {
	border-color: transparent;
}

.tree ul li::before {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--spacing) / -2);
	left: -2px;
	width: calc(var(--spacing) + 2px);
	height: calc(var(--spacing) + 1px);
	border: solid var(--color);
	border-width: 0 0 2px 2px;
}

.tree li::after {
	content: '';
	display: block;
	position: absolute;
	top: calc(var(--spacing) / 2 - var(--radius));
	left: calc(var(--spacing) - var(--radius) - 1px);
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: 50%;
	background: var(--color);
}

.body {
	&.active {
		text-shadow: 0 0 1.0em white;
		font-weight: bold;
	}
}
.body::before {
	content: '';
	position: relative;
	right: 0.25em;
	text-shadow: 0 0 0.1em white, 0 0 0.25em white;
}
.binary::before {
	content: '♋';
}
.star::before {
	content: '☀️';
}
.giant::before {
	content: '🪐';
}
.planet::before {
	content: '🌑';
}

/*#endregion*/

/*#region Buttons */

button {
	font-family: inherit;
	font-size: 1rem;

	min-width: 2.5em;
	
	padding: 0.25em 0.5em;

	color: var(--col-main);
	
	background-color: var(--col-background);

	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
}

.toggle {
	border-color: var(--col-main-dim);

	&:hover {
		border-color: var(--col-main);
	}

	&.on {
		border-color: var(--col-main);
		box-shadow: 0 0 0.25em var(--col-main), 0 0 0.25em var(--col-main);
	}
}

/*#endregion*/

#inspector > div {
	font-size: 90%;
}

/*#region Accordions */

details {
	margin: 0.5em 0;
}

summary {
	font-weight: bold;
	margin: 0.25em;

	list-style: none;

	transition: var(--transition-speed-medium);
}
summary:hover {
	color: var(--col-highlight);
	cursor: pointer;
}

summary::before {
	display: inline-block;
	content: "►";
	margin-right: 0.25em;
	transition: rotate var(--transition-speed-fast) ease-in-out;
}
details[open] > summary::before {
	rotate: 90deg;
}

/*#endregion*/

/*#region Inspector tables */

table {
	width: 100%;
}

th, td {
	padding: 0.25em;
}

th {
	text-align: right;
	width: 50%;
}

th[colspan="2"] {
	text-align: left;
}

/* Borders & Round corners */
table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--corner-radius);
}
table, th, td {
	border: 1px solid var(--col-main-dim);
}
th, td {
	border-left: none;
}
tr:first-child th,
tr:first-child td {
	border-top: none;
}
tr:last-child th,
tr:last-child td {
	border-bottom: none;
}
th:first-child,
td:first-child {
	border-left: none;
}
th:last-child,
td:last-child {
	border-right: none;
}

/* Alternating rows coloring */
tr {
	background-color: hsla(38, 75%, 40%, 0.1);
}
tr:nth-of-type(2n) {
	background-color: transparent;
}

/*#endregion*/

/*#region Progress bars */

.progressbar {
	display: inline-flex;
	justify-content: space-between;
	overflow: hidden;
	width: 50%;
	height: 0.5em;
	background-color: var(--col-background);
	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
}

.progressbar-fill {
	width: 0%;
	background-color: var(--col-main);
}

/*#endregion*/

/*#region Tooltips */

.tooltip {
	position: relative;
	display: inline-block;
	text-decoration: underline dotted 1px;
	text-underline-offset: 0.2em;
	cursor: help;

	&.btn {
		border-bottom: none;
	}
}
.tooltiptext {
	--width: 10em;
	
	font-size: 1rem;
	text-align: center;

	position: absolute;
	bottom: 150%;
	left: 50%;
	z-index: 10;
	
	width: var(--width);

	margin-left: calc(var(--width) / -2);
	padding: 0.2em 0;
	
	background-color: hsla(0, 0%, 0%, 0.85);
	color: var(--col-main);

	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius);
	
	visibility: hidden;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
.tooltiptext::after {
	content: "";

	position: absolute;
	top: 100%;
	left: 50%;

	margin-left: -0.5em;
	border-width: 0.5em;
	border-style: solid;
	border-color: var(--col-main) transparent transparent transparent;
}
@media (orientation: portrait) {
	.tooltiptext {
		--width: 6em;
	}
}

.tooltiptext.top {
	bottom: unset;
	top: 150%;
}
.tooltiptext.top::after {
	top: unset;
	bottom: 100%;
	border-color: transparent transparent var(--col-main) transparent;
}

.tooltiptext.edge.right {
	left: -100%;

	&::after {
		left: 85%;
	}
}

/*#endregion*/

/*#region Generator settings overlay */

#generatorSettings {
	position: absolute;
	top: 0;
	overflow: hidden;

	width: 100%;
	height: 0;

	background-color: var(--col-background);

	transition: var(--transition-speed-fast);

	&.open {
		height: 100vh;
	}
}

#settingsContent {
	padding: 3em 1em;
	height: 100%;
	overflow: auto;
}

/*#endregion*/

#seedBar {
	padding: 0.5em;
	margin-bottom: 0.5em;
}

#gen_seed {
	width: 22.5em;
}

/* Settings tabs bar */
.tabsBar {
	display: flex;
	justify-content: center;
}

/*#region Settings tabs buttons */

.tabButton {
	float: left;
	padding: 0.5em 0.5em;
	
	border: 1px solid var(--col-main-dim);
	border-radius: 0;

	transition: var(--transition-speed-medium);

	&:hover {
		cursor: pointer;
	}
}
.tabButton:first-of-type {
	border-top-left-radius: var(--corner-radius-big);
}
.tabButton:last-of-type {
	border-top-right-radius: var(--corner-radius-big);
}
.tabButton:hover {
	border-color: var(--col-main);
}
.tabButton.active {
 	border-color: var(--col-main);
	box-shadow: 0 0 0.25em var(--col-main), 0 0 0.25em var(--col-main);
}

/*#endregion*/

/*#region Settings items */

input {
	font-family: 'Metrophobic', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1em;
}

input[type="number"], input[type="text"] {
	width: 15em;

	color: var(--col-main);
	background-color: var(--col-background);

	border: 1px solid var(--col-main-dim);
	border-radius: var(--corner-radius);

	transition: var(--transition-speed-fast);

	&:hover {
		border-color: var(--col-alt);
	}
}

input[type="checkbox"] {
	accent-color: var(--col-main);

	&:hover {
		cursor: pointer;
	}
}

.setting-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin: 0.5em 0;
}

.setting-container label {
	display: inline-block;
	text-align: right;
	width: 15em;
}

.setting-container input {
	margin: 0;
	padding: 0;
	width: 15em;
}

.reset {
	font-size: 80%;
}

textarea {
	font-family: 'Courier New', Courier, monospace;
	font-size: 1em;

	border-radius: var(--corner-radius);
	color: var(--col-alt);
	background-color: var(--col-background);
	width: 100%;
	height: 15em;
}

/*#endregion*/

/* Settings tabs content */
.tabContent {
	display: none;
	padding: 0.5em 1em;

	background-color: var(--col-background);
	
	border: 1px solid var(--col-main-dim);
	border-radius: var(--corner-radius);

	&.active {
		display: block;
	}
}

/*#region Selector */

.select-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
}
@media (orientation: portrait) {
	.select-wrapper {
		flex-direction: column;
	}
}

select {
	transition: var(--transition-speed-fast);
}
select,
::picker(select) {
	appearance: base-select;

	color: var(--col-main);
	background-color: var(--col-background);
}

select::picker-icon {
	transition: var(--transition-speed-fast) rotate;
}
select:open::picker-icon {
	rotate: 180deg;
}
select:hover {
	border-color: var(--col-alt);
	filter: drop-shadow(0 0 0.1em var(--col-alt));

	&&::picker-icon {
		color: var(--col-alt);
	}
}

selectedcontent,
option {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	max-width: 75vw;
	gap: 1em;
	margin: 0.2em;
}
@media (orientation: portrait) {
	selectedcontent,
	option {
		font-size: 80%;
	}
}
selectedcontent {
	font-weight: bold;
	letter-spacing: 0.075em;
}

select,
option {
	&:hover {
		cursor: pointer;
	}
}

option:nth-of-type(odd) {
	background: rgb(from var(--col-main) calc(r*0.33) calc(g*0.33) calc(b*0.33) / 0.6);
}

option:hover,
option:focus {
	filter: drop-shadow(0 0 0.1em var(--col-alt));
}

optgroup {
	font-style: italic;

	option {
		font-style: initial;
	}
}

.script-thumb {
	text-shadow: 0 0 0.25em white;
}

.script-name {
	font-weight: bold;
}

.script-desc {
	text-wrap: pretty;
}

selectedcontent .script-desc {
	display: none;
}

/*#endregion*/

/*#region Dialogs */

a {
	color: var(--col-alt);
}

dialog {
	max-width: 40em;
	padding: 1.5em;

	color: var(--col-main);

	background-color: var(--col-background);

	border: 1px solid var(--col-main-dim);
	border-radius: var(--corner-radius-big);

	&::backdrop {
		background-color: rgba(0, 0, 0, 50%);
	}
}
@media (orientation: portrait) {
	dialog {
		max-width: 90%;
	}
}

.dialog-title {
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

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

.dialog-buttons {
	display: flex;
	gap: 3em;
	align-items: center;
	align-content: center;
	justify-content: center;
}

#logo {
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;

	height: 5em;

	margin: 1em;

	img {
		height: 100%;
		width: auto;
		object-fit: contain;
	}
}

#outboundPage {
	font-family: 'Courier New', Courier, monospace;
	color: var(--col-alt);
	background-color: hsl(0, 0%, 20%);
}

/*#endregion*/

/* Other elements */

hr {
	height: 1px;
	border: none;
	margin: 1em 0;
	background: linear-gradient(to right, transparent 0%, var(--col-main) 50%, transparent 100%);
}

/*#region Time warp slider */

#warpSlider {
	appearance: none;
    font-size: 1rem;

    width: 15em;
    height: 0.75em;

    background: var(--col-background);
    border: 1px solid var(--col-main);
    border-radius: 0.5em;

    filter: brightness(1);
}
#warpSlider::-webkit-slider-thumb {
	appearance: none;

	width: 1em;
	height: 1em;

	background: var(--col-main);
	border: 1px solid var(--col-background);
	border-radius: 50%;
}
#warpSlider::-moz-range-thumb {
	width: 1em;
	height: 1em;

	background: var(--col-main);
	border: 1px solid var(--col-background);
	border-radius: 50%;
}
@media (orientation: portrait) {
	#warpSlider {
		width: 50%;
	}
}

/*#endregion*/

#cellScale {
	width: 12em;
}

/* Hovers */

summary,
button,
.body,
#warpSlider {
	transition: filter var(--transition-speed-fast);

	&:hover {
		cursor: pointer;
		filter: brightness(1.25);
	}
}