css/001-lib/tippy.css

+.tippy-touch{cursor:pointer!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{position:absolute;width:0;height:0;border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:9px solid #333;border-right:9px solid transparent;border-left:9px solid transparent;bottom:-9px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 50%;transform-origin:0 50%}.tippy-popper[x-placement^=top] [x-circle].enter{opacity:1;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=top] [x-circle].leave{opacity:0;-webkit-transform:scale(.4) translate(-50%,-50%);transform:scale(.4) translate(-50%,-50%)}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:9px solid #fff;border-right:9px solid transparent;border-left:9px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:9px solid rgba(0,0,0,.7);border-right:9px solid transparent;border-left:9px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{position:absolute;width:0;height:0;border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:9px solid #333;border-right:9px solid transparent;border-left:9px solid transparent;top:-9px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{opacity:1;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=bottom] [x-circle].leave{opacity:0;-webkit-transform:scale(.4) translate(-50%);transform:scale(.4) translate(-50%)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:9px solid #fff;border-right:9px solid transparent;border-left:9px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:9px solid rgba(0,0,0,.7);border-right:9px solid transparent;border-left:9px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{position:absolute;width:0;height:0;border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;top:50%}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px;top:50%}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:9px solid #333;border-top:9px solid transparent;border-bottom:9px solid transparent;right:-9px;top:50%}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 5%;transform-origin:50% 5%}.tippy-popper[x-placement^=left] [x-circle].enter{opacity:1;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=left] [x-circle].leave{opacity:0;-webkit-transform:scale(.4) translate(-50%,-33%);transform:scale(.4) translate(-50%,-33%)}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:9px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:9px solid rgba(0,0,0,.7);border-top:9px solid transparent;border-bottom:9px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{position:absolute;width:0;height:0;border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;top:50%}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px;top:50%}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:9px solid #333;border-top:9px solid transparent;border-bottom:9px solid transparent;left:-9px;top:50%}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 5%;transform-origin:-50% 5%}.tippy-popper[x-placement^=right] [x-circle].enter{opacity:1;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=right] [x-circle].leave{opacity:0;-webkit-transform:scale(.4) translate(-50%,-33%);transform:scale(.4) translate(-50%,-33%)}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:9px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:9px solid rgba(0,0,0,.7);border-top:9px solid transparent;border-bottom:9px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper [x-circle]{background-color:#fff}.tippy-popper[data-animatefill]{background-color:transparent}.tippy-popper [x-arrow]{position:absolute;width:0;height:0}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.8)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#203d5d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-inertia]{-webkit-transition-timing-function:cubic-bezier(.53,1,.36,.85);transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:120%;width:calc(100% + 2rem);-webkit-transition:all ease-out;transition:all ease-out;left:50%;z-index:-1;opacity:0;overflow:hidden}.tippy-tooltip [x-circle]:before{content:"";padding-top:100%;padding-top:calc(60% + 2rem);float:left}@media (max-width:500px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
\ No newline at end of file

css/002-variables/colors.css

 :root {
-    --button-color: #252525;
-    --button-border-color: #333333;
-    --button-selected-color: #050505;
-    --button-hover-color: #414141;
-    --button-disabled-color: #1a1a1a;
+	--button-color: #252525;
+	--button-border-color: #333333;
+	--button-selected-color: #050505;
+	--button-hover-color: #414141;
+	--button-disabled-color: #1a1a1a;
 
-    --link-color: #68D;
-    --link-hover-color: #8af
+	--link-color: #68D;
+	--link-hover-color: #8af;
+
+	--background-default: #111;
+	--background-light: #222;
 }

css/003-sugarcube-overwrite/general.css

+/* Revert font to SC 2.36 */
+html {
+	font: 16px/1 Helmet,Freesans,sans-serif;
+}
+
 body {
-    overflow-x: hidden;
+	overflow-x: hidden;
 }
 
 /* clears SugarCube's default transition */
 .passage {
-    transition: none;
-    -webkit-transition: none;
+	transition: none;
+	-webkit-transition: none;
 }
 
 .passage-in {
-    opacity: 1 !important;
+	opacity: 1 !important;
 }
 
 #passages {
-    /* max-width: 54em */
-    max-width: 100%;
+	/* max-width: 54em */
+	max-width: 100%;
 }
 
 /* makes HR colorflip compatible */
 hr {
-    background:#ccc;
-    border:0;
+	background:#ccc;
+	border:0;
+}
+
+/* fix dialog title centering */
+#ui-dialog-title {
+	padding-left: 3.5em;
+}
+
+/* make buttons look nice */
+.passage button {
+	background-color: var(--button-color);
+	border: solid 2px var(--button-border-color);
+}
+.passage button:hover {
+	background-color: var(--button-hover-color);
+}
+
+select {
+	padding-top: 0.4em;
+	padding-bottom: 0.4em;
+	background-color: #111;
 }

css/003-sugarcube-overwrite/sidebar.css

@@ -2,24 +2,24 @@
 
 /* make the sidebar more compact by reducing the space between major parts */
 #ui-bar-body {
-    /* height: calc(100% - 2.5em); */
-    /* margin: 2.5em 0; */
-    height: calc(100% - 1.5em);
-    margin: 1.5em 0;
+	/* height: calc(100% - 2.5em); */
+	/* margin: 2.5em 0; */
+	height: calc(100% - 1.5em);
+	margin: 1.5em 0;
 }
 
 #ui-bar-body > :not(:first-child) {
-    /* margin-top: 2em; */
-    margin-top: 1.5em;
+	/* margin-top: 2em; */
+	margin-top: 1.5em;
 }
 
 #story-author {
-    /* margin-top: 2em; */
-    margin-top: 0;
+	/* margin-top: 2em; */
+	margin-top: 0;
 }
 
 /* make cheat text boxes fit in sidebar */
 #story-caption input {
-    min-width: 0;
-    width: calc(100% - 0.8em - 2px);
+	min-width: 0;
+	width: calc(100% - 0.8em - 2px);
 }

css/arcologyBuilding/arcologyBuilding.css

@@ -172,10 +172,14 @@
 	border-color: gray;
 }
 
-.building .row .transportHub {
+.building .row .transport-hub {
 	border-color: magenta;
 }
 
 .building .row .weaponsManufacturing {
 	border-color: springgreen;
 }
+
+#arcology-building-container {
+	margin-bottom: 2em;
+}

css/art/art.css

 /* small trick to hide broken images */
 img {
-    text-indent: -10000px;
+	text-indent: -10000px;
 }
 
 .imageColumn { /* TODO: this is mostly a copy of imageRef to get its flex features working properly. They can probably be removed from imageRef at some point */
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    position: relative;
-    float: right;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	position: relative;
+	float: right;
 }
 
 .imageRef {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    position: relative;
-    background-color: rgba(80, 80, 80, 0.5);
-    margin: 2px;
+	align-items: flex-start;
+	background-color: rgba(80, 80, 80, 0.5);
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	position: relative;
 }
 
 .tinyImg {
-    height: 120px;
-    width: 120px;
-    float: left;
+	border: 1px solid #333333;
+	float: left;
+	height: 8em;
+	width: 8em;
 }
 
 .smlImg {
-    height: 150px;
-    width: 150px;
-    float: left;
+	height: 10em;
+	width: 10em;
+	float: left;
 }
 
 .smlImg > img, .smlImg > video {
-    height: auto;
+	height: auto;
 }
 
 .medImg {
-    height: 300px;
-    width: 300px;
-    float: right;
+	height: 16em;
+	width: 16em;
+	float: right;
+	margin: 1em;
 }
 
 .medImg > img, .medImg > video {
-    height: auto;
+	height: auto;
 }
 
 .lrgRender {
-    height: 531px;
-    width: 531px;
-    margin-right: -50px;
-    margin-left: -50px;
-    float: right;
-    z-index: -1;
+	border: 2px solid #333333;
+	float: right;
+	margin-left: 1em;
+	margin-top: 1em;
+	width: 33%;
 }
 
 .lrgVector {
-    height: 600px;
-    width: 600px;
-    margin-right: -125px;
-    margin-left: -125px;
-    float: right;
-    z-index: -1;
+	border: 2px solid #333333;
+	float: right;
+	height: 40em;
+	margin-left: 1em;
+	margin-top: 1em;
+	width: 33%;
 }
 
-.lrgRender > div.mask {
-    width: 150px;
-    height: 100%;
-    background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
-    z-index: 1;
-    /*position: absolute;*/
+.lrgVector.custom {
+	height: auto;
 }
 
-.lrgRender > img, .lrgRender > video {
-    margin-left: -150px;
-    height: 531px;
-    width: auto;
-}
-
-.lrgVector > div.mask {
-    width: 150px;
-    height: 100%;
-    background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.8) 60%, rgba(17, 17, 17, 0));
-    z-index: 1;
-}
-
-.lrgVector > img, .lrgVector > video {
-    margin-left: -150px;
-    height: 600px;
-    width: auto;
-}
-
-.lrgVector svg {
-    width: 336px;
+.lrgRender > svg {
+	height: 40em;
+	position: relative;
 }
 
 object {
-    object-fit: scale-down;
-    position: absolute;
-    top: 0;
-    left: 0;
+	object-fit: scale-down;
+	position: absolute;
+	top: 0;
+	left: 0;
 }
 
 img.paperdoll {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin-left: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin-left: 0;
+}
+
+img.assistant {
+	float: right;
+	border: 3px hidden;
+	object-fit: contain;
 }

css/art/genAI.css

+.ai-art-image {
+    transition: filter 0.5s ease-in-out;
+    position: relative;
+    float:right;
+    border:3px hidden;
+    object-fit:contain;
+    height:100%;
+    width:100%;
+    cursor: zoom-in;
+}
+.ai-art-image:not([src]) {
+    aspect-ratio:2/3;
+}
+
+.ai-art-container.refreshing {
+    overflow:hidden;
+}
+.ai-art-container.refreshing .ai-art-image {
+    filter: blur(5px);
+}
+
+.ai-art-progress {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: max(5%, 20px);
+    border-radius: 0;
+    border: none;
+    background: linear-gradient(to right, white 50%, rgba(0, 0, 0, 0.5) 50%);
+    background-size: 200%;
+    --progress: 0%;
+    background-position-x: calc(100% - var(--progress));
+    transition: background-position-x 1s linear, opacity 300ms ease-in-out;
+}
+.ai-art-progress::-webkit-progress-value {
+    background: none;
+}
+.ai-art-progress::-moz-progress-bar {
+    background: none;
+}
+.ai-art-progress[value="0"],
+.ai-art-progress[value="1"] {
+    opacity: 0;
+}
+.ai-art-progress[value="1"] {
+    transition: background-position-x 200ms linear, opacity 300ms 200ms ease-in-out;
+}
+.ai-art-progress[value="0"] {
+    transition: opacity 300ms ease-in-out;
+}
+
+.ai-spinner {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 30px;
+    animation: spin 2s linear infinite;
+}
+
+.rightArrow {
+    right: 0;
+}
+
+.leftArrow {
+    left: 0;
+}
+
+.arrow {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    cursor: pointer;
+    border: none;
+}
+
+.ai-art-container {
+    width: 100%;
+    height: 100%;
+    float: right;
+    border: 3px hidden;
+    object-fit: contain;
+}
+
+.ai-art-container.refreshing .ai-spinner {
+    display: block;
+}
+
+.ai-toolbar {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.ai-art-container:hover .ai-toolbar {
+    display: flex;
+    flex-direction: column;
+}
+
+.ai-art-container:hover .arrow {
+    display: block;
+}
+
+.ai-toolbar button {
+    /* position: absolute; */
+    min-width: 2rem;
+    min-height: 2rem;
+    cursor: pointer;
+    border: none;
+}
+
+.ai-art-container button {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.zoom-in::after {
+    font-family: "sc-icons";
+	content: " \f00e"; /* Zoom in icon */
+}
+
+.refresh-icon::after {
+    font-family: "sc-icons";
+	content: " \f2ea"; /* Refresh icon */
+}
+
+.lightbox {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0 0 0 / 0.2);
+}
+
+.lightbox-background {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.lightbox img {
+    max-width: 80%;
+    max-height: 80%;
+}
+
+.lightbox .close {
+    top: 4rem;
+    right: 4rem;
+    font-size: 2rem;
+    background: none;
+    position: absolute;
+    border: none;
+}
+
+@keyframes spin {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+.ai-queue-overlay {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    background-color: #1a1a1a;
+    border-left: #333 2px solid;
+    border-top: #333 2px solid;
+    border-top-left-radius: 1em;
+    padding: 0.5em;
+
+}
+
+.ai-queue-overlay.hidden {
+    display: none;
+}
+
+.ai-queue-overlay .spinner {
+    display: inline-block;
+    width: 2.3em;
+}
+
+.ai-queue-overlay .spinner::after {
+    font-family: 'sc-icons';
+    content: "\f110";
+    position: absolute;
+    top: 50%;
+    left: 0.9em;
+    font-size: 25px;
+    animation: spin 3s linear infinite;
+}
+
+.ai-queue-overlay button {
+    font-family: 'sc-icons';
+    background-color: var(--button-color);
+    border: solid 2px var(--button-border-color);
+}
+
+.ai-queue-overlay button:hover {
+    background-color: var(--button-hover-color);
+}

css/css.md

@@ -19,4 +19,4 @@ Most of the structure should be self-explanatory, this is a list of the main rul
 ## Compiling
 
 During compiling all CSS files in this directory get combined and then added as a module, which means the styles are put
-directly into <head> element of the final HTML file.
+directly into the `<head>` element of the final HTML file.

css/debugging/profileEvents.css

+.profile-events {
+	display: grid;
+	grid-template-columns: max-content max-content max-content auto;
+	grid-column-gap: 1em;
+}

css/endWeek/FCTV.css

-.fctv {
-	display: float;
-}
-
 .fctv-remote {
 	text-align: center;
 	justify-items: center;
 	display: grid;
 	float: left;
 	width: min-content;
-	padding-right: 20px;
+	padding: 0.5em;
+	border: 3px white solid;
+	margin: 0 1em;
 }
+
 .fctv-remote-numbers {
 	display: grid;
-	grid-gap: 3px;
+	grid-gap: 0.5em;
 	grid-template-columns: repeat(3, min-content);
-	justify-items:center;
+	justify-items: center;
 }
+
 .fctv-remote-button {
-	margin-top: 10px;
+	margin-top: 0.5em;
+}
+
+.fctv-remote-selected {
+	font-weight: bold;
 }

css/endWeek/slavesReport.css

 div.slave-report {
-    margin-top: 1em;
-    margin-bottom: 1em;
+	margin-top: 1em;
+	margin-bottom: 1em;
+	float: inline-start;
 }

css/facilities/facilities.css → css/events/events.css

-.facility-rename {
+div.event-section {
 	margin-top: 1em;
+	margin-bottom: 1em;
 }

css/facilities/dressingRoom.css

+.dressing-room-block {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.dressing-room-cell {
+    overflow: hidden;
+	display: inline-block;
+	width: 20em;
+	border: 1px solid var(--button-border-color);
+    margin: 1rem;
+    border-radius: 16px;
+}
+
+.dressing-room-title {
+    margin: 0.4rem 1.4rem;
+	display: grid;
+	align-items: left;
+}
+
+.dressing-room-label {
+	margin: .1rem;
+}
+
+
+.dressing-room-cell:hover { background: var(--button-hover-color) }

css/facilities/farmyard.css

-.farmyard-intro,
-.farmyard-domestic {
-	margin-bottom: 1em;
-}
-
-.farmyard-expand,
-.farmyard-menials,
-.farmyard-rules,
-.farmyard-upgrades,
-.farmyard-animals,
-.farmyard-slaves,
-.farmyard-heading {
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
-
-.animal-add,
-.farmyard-rename,
-.farmyard-exotic {
-	margin-top: 1em;
-}
-
-.farmyard-heading {
-	text-transform: uppercase;
-}
-
-.farmyard-heading,
-.farmyard-animal-type {
-	font-weight: bold;
-}

css/facilities/incubator.css

-.incubator-underscore {
-	border-bottom: 1px solid;
-}
-
-.incubator-tank {
-	border-bottom: 2px solid cyan;
-	border-top: 2px solid cyan;
-	border-radius: 15px;
-	padding: 0.5em;
-}

css/facilities/pit.css

-.pit-intro,
-.pit-section {
-	margin-bottom: 1em;
-}
-
-.kill-slave-options,
-.kill-slave-relations,
-.kill-slave-cancel,
-.pit-assign,
-.pit-rename {
-	margin-top: 1em;
-}

css/facilities/statistics.css

 table.facility-stats {
-	width: 100%;
-	padding-left: 20px;
-	padding-right: 20px;
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: auto;
 }
 
-table.facility-stats > tr.header {
-	border-bottom: 2px solid white;
+.facility-stats td,
+.facility-stats th {
+  padding: 0 10px;
 }
 
-table.facility-stats > tr.total {
-	border-top: 1px solid white;
+.facility-stats td:last-child,
+.facility-stats th:last-child {
+  border-left: 1px solid white;
 }
 
-table.facility-stats > tr > th.narrow {
-	width: 10em;
-	text-align: right;
+.facility-stats td:nth-last-child(2),
+.facility-stats th:nth-last-child(2) {
+  border-left: 1px dashed white;
 }
 
-table.facility-stats > tr > th.wide {
-	width: 20em;
-	text-align: right;
+.facility-stats th:not(:first-child) {
+  text-align: right;
 }
 
-table.facility-stats-slave {
-	width: 100%;
-	font-size: 90%;
-	line-height: 110%;
+.facility-stats tr:first-child th {
+  padding-top: 10px;
 }
 
-table.facility-stats-slave > tr {
-	border-bottom: 1px solid #aaa;
-	border-left: none;
-	border-right: none;
-	border-top: none
+.facility-stats tr:last-child td {
+  padding-bottom: 10px;
 }
 
-table.facility-stats-slave > tr > th.narrow {
-	width: 11em;
-	text-align: right;
+.facility-stats tbody tr:first-child th {
+  border-top: 1px solid white;
+  padding-top: 5px;
 }
 
-table.facility-stats-slave > tr > th.wide {
-	width: 22em;
-	text-align: right;
+.facility-stats tbody tr:not(:first-child) th {
+  border-bottom: 1px dashed white;
 }
 
-td.value {
-	padding-right: 3px;
-	text-align: right;
+.facility-stats tbody tr:not(:first-child) th:nth-last-child(4),
+.facility-stats tbody td:nth-last-child(4) {
+  border-left: 1px dashed white;
 }
 
-.decimalZero {
-	opacity: 0.3;
+.facility-stats thead tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:last-child td {
+  padding-bottom: 5px;
+}
+
+.facility-stats tbody tr:nth-child(2n) td {
+  background: var(--background-light);
+}
+
+.facility-stats tbody tr:not(:first-child) {
+  font-size: 14px;
+}
+
+.facility-stats tfoot tr:first-child td {
+  border-top: 1px solid white;
+  padding-top: 5px;
+}
+
+.facility-stats tfoot tr:last-child {
+  font-weight: bold;
+}
+
+.facility-stats .value {
+  text-align: right;
+  font-family: monospace;
+}
+
+.facility-stats tfoot tr:last-child .value {
+  border-top: 3px double white;
+}
+
+.facility-stats .decimalZero {
+  opacity: 0.3;
 }

css/facilities/studio.css

+/* these colors have to be accessed directly for graph colors */
+:root {
+  --genre-color-paraphilia: yellow;
+  --genre-color-fetish: lightcoral;
+  --genre-color-generic: gray;
+  --genre-color-quirk: lawngreen;
+  --genre-color-general: white;
+}
+
+/* and they have to be accessed through classes for text */
+.genre.paraphilia {
+  color: var(--genre-color-paraphilia);
+}
+
+.genre.fetish {
+  color: var(--genre-color-fetish);
+}
+
+.genre.generic {
+  color: var(--genre-color-generic);
+}
+
+.genre.quirk {
+  color: var(--genre-color-quirk);
+}
+
+.genre.general {
+  color: var(--genre-color-general);
+}
+
+/* genre table styles */
+table.genre-stats {
+  width: fit-content;
+  border: 2px solid white;
+  table-layout: fixed;
+}
+
+.genre-stats td {
+  padding: 0 10px;
+  border: 1px solid white;
+}
+
+.genre-stats thead td {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.genre-stats tr:first-child td {
+  padding-top: 10px;
+}
+
+.genre-stats tr:last-child td {
+  padding-bottom: 10px;
+}
+
+.genre-stats tbody tr td:not(:first-child) {
+  text-align: left;
+}
+
+.genre-stats thead tr td.sort-asc::after {
+  content: "\25b4";
+}
+
+.genre-stats thead tr td.sort-desc::after {
+  content: "\25be";
+}

css/facilities/wardrobe.css

 .wardrobe-shopping-block {
-    display: flex;
-    flex-wrap: wrap;
+	display: flex;
+	flex-wrap: wrap;
 }
 
 .wardrobe-shopping-cell {
-    display: inline-block;
-    width: 20em;
+	display: inline-block;
+	width: 20em;
 	border: 1px solid var(--button-border-color);
 }
 

css/futureSocieties/fsPassage.css

+.fs-recommend {
+	border: 1px solid;
+	padding: 2px;
+	border-radius: 3px;
+	font-size: smaller;
+}
+
+.fs-recommend-great {
+	border-color: green;
+	color: green;
+}
+
+.fs-recommend-good {
+	border-color: greenyellow;
+	color: greenyellow;
+}
+
+.fs-recommend-neutral {
+	border-color: gold;
+	color: gold;
+}
+
+.fs-recommend-bad {
+	border-color: red;
+	color: red;
+}
\ No newline at end of file