@media screen and (max-width: 799px), (max-height: 599px) {
	html:not(.mobile):after, html:not(.mobile):before {
		position: fixed;
		z-index: 1001231231231231230;
		top: 0;
		left: 0;
		height: 100%;
	}
	
	html:not(.mobile):after {
		content: "ERROR::\A'current rendering device unsuitable';\a'required neural output of at least 800x600'";
		box-sizing: border-box;
		white-space: pre-wrap;
		width: 100vw;
		height: 100vh;
		max-width: 100%;
		display: flex;
		margin: auto;
		justify-content: center;
		align-items: center;
		font-family: 'barcodetext', sans-serif;
		font-size: 2rem;	
        line-height: 1.5em;
		letter-spacing: 2.5px;
		padding: 10px;
		color: var(--bright-color);
		text-align: center;
	}
	
	html:not(.mobile):before {
		content: "";
		position: fixed;
		background-color: var(--dark-color);
		width: 100%;
	}
}

body[state="corru-loaded"][menu="none"]:not(.in-dialogue)::before, body.loading::after, body.corru-refreshing::after {
    content: "WARNING::'Mindspike usage may present visuals which trigger seizures for people with PHOTOSENSITIVE EPILEPSY, including flashes of color.';\A'Ensure HARDWARE ACCELERATION is active to avoid chronos misalignment.'\A'content modifying EXTENSIONS may interfere with performance.';\A'User discretion is advised.'";
    font-family: spacemono;
    font-size: 0.75em;
    max-width: 600px;
    position: fixed;
    z-index: 1000;
    display: block;
    top: 10vh;
    background: var(--dark-color);
    padding: 0.25em;
    text-align: center;
    line-height: 1.25em;
    white-space: pre-wrap;
    pointer-events: none;
}

body[state="corru-loaded"]:not(.in-dialogue):not(.loading):not(.corru-refreshing)::after {
    content: "CORRU OBSERVER";
    font-family: barcodetext;
    font-size: 2em;
    position: fixed;
    z-index: 1000;
    bottom: 2vmin;
    left: 2vmin;
    background: var(--dark-color);
    padding: 0.25em;
    pointer-events: none;
}

body.loading::after, body.corru-refreshing::after {
    content: "ATTENTION::'clearing mindspike buffer';'no progress will be lost'";
    padding: 1em;
    top: 50%;
    transform: translateY(-100%);
    opacity: 1;
    display: block;
}

body.loading::after {
    content: "NOTICE::'loading resources';'please wait'";
}

/* GENERAL COLORS */
:root { 
    --dark-color: black;
    --bright-color: white;
    --friend-color: #00ffff;
    --obesk-color: #ff00ff;
    --neutral-color: #ffff00;
    --bastard-color: #ff0066;
    --fundfriend-color: #00ff66;
    --baseTransform: translateX(0);

    --bigFont: 20px;
    --regularFont: 16px;
    --unitlessHeight: 1080px;

    --contentDialogueOffset: -12.5vw;
    
    font-feature-settings: "liga" 0;
    font-size: var(--regularFont);
}

.dark-color { color: var(--dark-color); }
.bright-color { color: var(--bright-color); }
.friend-color { color: var(--friend-color); }
.obesk-color { color: var(--obesk-color); }
.neutral-color { color: var(--neutral-color); }
.bastard-color { color: var(--bastard-color); }
.fundfriend-color { color: var(--fundfriend-color); }

.dark-shadow { text-shadow: 1px 1px var(--dark-color); }
.bright-shadow { text-shadow: 1px 1px var(--bright-color); }
.friend-shadow { text-shadow: 1px 1px var(--friend-color); }
.obesk-shadow { text-shadow: 1px 1px var(--obesk-color); }
.neutral-shadow { text-shadow: 1px 1px #ffff0082; } /* blehh */
.bastard-shadow { text-shadow: 1px 1px var(--bastard-color); }
.fundfriend-shadow { text-shadow: 1px 1px var(--fundfriend-color); }

/* fonts */
@font-face {
    font-family: 'beech';
    src: url('/fonts/Beech.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.beech { font-family: beech, sans-serif }

@font-face {
    font-family: 'barcode';
    src: url('/fonts/LibreBarcode128-Regular.woff2') format('woff2'),
        url('/fonts/LibreBarcode128-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.barcode { font-family: barcode, sans-serif }

@font-face {
    font-family: 'barcodetext';
    src: url('/fonts/LibreBarcode128Text-Regular.woff2') format('woff2'),
        url('/fonts/LibreBarcode128Text-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.barcodetext { font-family: barcodetext, sans-serif }

@font-face {
    font-family: 'spacemono';
    src: url('/fonts/SpaceMono-Regular.woff2') format('woff2'),
        url('/fonts/SpaceMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'spacemono';
    src: url('/fonts/SpaceMono-Bold.woff2') format('woff2'),
        url('/fonts/SpaceMono-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.spacemono { font-family: spacemono, sans-serif }

@font-face {
    font-family: 'bastard';
    src: url('/fonts/newspaper.woff2') format('woff2'),
        url('/fonts/newspaper.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.bastard-font { font-family: bastard, sans-serif; font-size: 2.5em; line-height: 1.25em; }

@font-face {
    font-family: 'intrusive';
    src: url('/fonts/flanfont.woff2') format('woff2'),
        url('/fonts/flanfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'corruicons';
    src:  url('/fonts/corruicons.eot?6mcqel');
    src:  url('/fonts/corruicons.eot?6mcqel#iefix') format('embedded-opentype'),
    url('/fonts/corruicons.ttf?6mcqel') format('truetype'),
    url('/fonts/corruicons.woff?6mcqel') format('woff'),
    url('/fonts/corruicons.svg?6mcqel#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'ruined';
    src: url('/fonts/RuinedSerif.woff2') format('woff2'),
        url('/fonts/RuinedSerif.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ruined';
    src: url('/fonts/RuinedSerifIta.woff2') format('woff2'),
        url('/fonts/RuinedSerifIta.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
.ruined-text {
    font-family: ruined;
    text-transform: uppercase;
    color: var(--bright-color);
    font-size: 2em;
}

.cicon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'corruicons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: none;
    font-smooth: never;
}

.ci-down:before {content: "\e900";}
.ci-left:before {content: "\e901";}
.ci-right:before {content: "\e902";}
.ci-up:before {content: "\e903";}
.ci-bars:before {content: "\e904";}
.ci-ent:before {content: "\e905";}
.ci-group:before {content: "\e906";}
.ci-masks:before {content: "\e907"; font-size: 1.1em;}
.ci-moth:before {content: "\e908";}
.ci-nav:before {content: "\e909";}
.ci-quality:before {content: "\e90a";}
.ci-sys:before {content: "\e90b";}
.ci-vol:before {content: "\e90c";}
.ci-zoomin:before {content: "\e90d";}
.ci-zoomout:before {content: "\e90e";}  

/* GFX PROCESSING - dithering preservation stops at 1200px because below that it becomes illegible mostly */
@media only screen and (min-width: 1200px) {
    div, img {
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-pixelated;
        image-rendering: pixelated;
    }
}

.preserve-3d {
    transform-style: preserve-3d !important;
}

/* CSS RESET */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline; box-sizing: border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

::selection {
	background-color: transparent;
    color: inherit;
}

input::selection, textarea::selection {
    background-color: var(--dark-color);
    color: var(--neutral-color)
}

em {
    font-style: italic;
}

/* GLOBAL ANIMATIONS */
@keyframes SPIN {
    0% { transform: var(--baseTransform) rotate(0deg) }
    100% { transform: var(--baseTransform) rotate(360deg) }
}

@keyframes SPIN-Y {
    0% { transform: var(--baseTransform) rotateY(0deg) }
    100% { transform: var(--baseTransform) rotateY(360deg) }
}

@keyframes STATIC {
	0% { transform: translate(0, 0) }
	10% { transform: translate(-10%, -7%) }
	20% { transform: translate(-15%, 6%) }
	30% { transform: translate(8%, -18%) }
	40% { transform: translate(-10%, -3%) }
	50% { transform: translate(5%, -13%) }
	60% { transform: translate(10%, 2%) }
	70% { transform: translate(2%, -10%) }
	80% { transform: translate(15%, 0) }
	90% { transform: translate(0, 15%) }
	100% { transform: translate(0, 0) }
}

.shake-anim {
    animation: SHAKE 100ms linear infinite;
}

@keyframes SHAKE {
    0% { transform: var(--baseTransform) translate(0px, 1px) rotate(0deg); }
    10% { transform: var(--baseTransform) translate(-1px, -1px) rotate(1deg); }
    20% { transform: var(--baseTransform) translate(-2px, 1px) rotate(-1deg); }
    30% { transform: var(--baseTransform) translate(2px, 2px) rotate(0deg); }
    40% { transform: var(--baseTransform) translate(2px, -1px) rotate(-1deg); }
    50% { transform: var(--baseTransform) translate(-1px, 1px) rotate(1deg); }
    60% { transform: var(--baseTransform) translate(-2px, 4px) rotate(0deg); }
    70% { transform: var(--baseTransform) translate(1px, 1px) rotate(1deg); }
    80% { transform: var(--baseTransform) translate(-1px, -1px) rotate(-1deg); }
    90% { transform: var(--baseTransform) translate(1px, 2px) rotate(0deg); }
    100% { transform: var(--baseTransform) translate(1px, -2px) rotate(1deg); }
}

.bigshake-anim {
    animation: SHAKE 100ms linear infinite;
}

@keyframes BIGSHAKE {
    0% { transform: var(--baseTransform) translate(0px, 5px) rotate(0deg); }
    10% { transform: var(--baseTransform) translate(-5px, -5px) rotate(1deg); }
    20% { transform: var(--baseTransform) translate(-10px, 5px) rotate(-1deg); }
    30% { transform: var(--baseTransform) translate(10px, 10px) rotate(0deg); }
    40% { transform: var(--baseTransform) translate(10px, -5px) rotate(-1deg); }
    50% { transform: var(--baseTransform) translate(-5px, 5px) rotate(1deg); }
    60% { transform: var(--baseTransform) translate(-10px, -5px) rotate(0deg); }
    70% { transform: var(--baseTransform) translate(5px, 5px) rotate(1deg); }
    80% { transform: var(--baseTransform) translate(-5px, -5px) rotate(-1deg); }
    90% { transform: var(--baseTransform) translate(5px, 10px) rotate(0deg); }
    100% { transform: var(--baseTransform) translate(5px, -10px) rotate(1deg); }
}

@keyframes OMEGASHAKE {
    0% { transform: var(--baseTransform) translate(10vw, 10vh) rotate(0deg); }
    10% { transform: var(--baseTransform) translate(25vw, 1vh) rotate(3deg); }
    20% { transform: var(--baseTransform) translate(5vw, 5vh) rotate(-3deg); }
    30% { transform: var(--baseTransform) translate(-25vw, 25vh) rotate(0deg); }
    40% { transform: var(--baseTransform) translate(-10vw, -5vh) rotate(-3deg); }
    50% { transform: var(--baseTransform) translate(-10vh, 10vh) rotate(3deg); }
    60% { transform: var(--baseTransform) translate(-20vh, 40vh) rotate(0deg); }
    70% { transform: var(--baseTransform) translate(10vh, 10vh) rotate(3deg); }
    80% { transform: var(--baseTransform) translate(-10vh, -10vh) rotate(-3deg); }
    90% { transform: var(--baseTransform) translate(10vh, 15vh) rotate(0deg); }
    100% { transform: var(--baseTransform) translate(10vh, -20vh) rotate(3deg); }
}

@keyframes HOVER {
    0% { transform: var(--baseTransform) translateY(5%) }
    100% { transform: var(--baseTransform) translateY(-5%) }
}

@keyframes TINYHOVER {
    0% { transform: var(--baseTransform) translateY(1%) }
    100% { transform: var(--baseTransform) translateY(-1%) }
}

@keyframes TINYSWAY {
    0% { transform: var(--baseTransform) rotate(-1deg) }
    100% { transform: var(--baseTransform) rotate(1deg) }
}

@keyframes GROWPULSE {
    0% { transform: scale(0.001); opacity: 0;}
    50% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0;}
}

@keyframes BREATHE {
    0% { transform: scale(1);}
    100% { transform: scale(1.2); }
}

.refresh-anim {
    animation: REFRESH 1ms;
}

@keyframes REFRESH {
    0% { transform: var(--baseTransform, translateY(0)) translateY(-1px); }
    100% { transform: var(--baseTransform, translateY(0))  translatey(0px); }
}

html {
    transition: opacity 2s ease-in-out;
}

html.cutscene {
    cursor:not-allowed;
}

html.cutscene body, html.cutscene .menu-box {
    pointer-events: none;
}

html.totaltran body {
    transition: opacity 2s ease-in-out;
}

html.totalfade body {
    pointer-events: none;
    opacity: 0;
}

html.ftb {
    opacity: 0;
}

/* LOADING STUFF */
#content {
    transition: 1s;
    opacity: 1;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
}

html.is-animating #content {
    opacity: 0;
}

#static, 
body.loading #static, 
body[state="corru-entered"].loading #static {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 25;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
    transition: opacity 400ms ease-in-out;
}

#static:after {
	content: "";
    background: var(--bright-color);
	background-image: url('/img/textures/static.gif');
	animation: STATIC 1s steps(4) infinite;
	animation-play-state: running;
	position: fixed;
	left: -50%;
	top: -100%;
	height: 300%;
	width: 300%;
    animation-play-state: paused;
}

.darkflash #static:after {
	background-image: url('/img/textures/badstatic.gif');
}

#static::before {
    content: "";
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    background: url(/img/sprites/velzie/smile2.png);
    z-index: 5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

body[state="corru-loaded"] #static, body.loading #static, body[state="corru-leaving"] #static {
    pointer-events: initial;
}

body.in-dialogue[state="corru-loaded"] #static, body[state*="corru-loaded"].in-dialogue #static div {
    pointer-events: none;
}

body[state*="corru-loaded"] #static div, 
body[state="corru-entered"].flash #static {
    opacity: 1;
    pointer-events: initial;
    z-index: 2;
}

body.flashfade #static {
    z-index: 2;
}

body.flash #static {
    z-index: 25;
}

body[state="corru-loaded"] #static::after,
body[state="corru-leaving"] #static::after,
body.flash #static::after {
    animation-play-state: running;
}

body.velzie #static::before {
    opacity: 1;
}

.enter {
    display: flex;
    flex-direction: column;
    font-family: barcodetext;
    background: var(--dark-color);
    color: var(--neutral-color);
    border: 1px solid var(--neutral-color);
    font-size: 1.5em;
    text-align: center;
    padding: 1em;
    cursor: pointer;
}

.enter::before {
    content: attr(page);
    margin-bottom: 1em;
    font-size: 1.5em;
    text-align: center;
    color: var(--obesk-color);
}

#static .enter, body[state*="corru-entered"] #static, .cutscene #static .enter, body.loading #static .enter {
    opacity: 0;
    pointer-events: none;
}

body.loading #static .enter {
    opacity: 0.25;
}

/* DEFAULT STYLING */
a { 
	text-decoration: none;
}

body {
	background: var(--dark-color);
	color: var(--bright-color);
	overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: spacemono, sans-serif;
}

body.in-menu, body[state="corru-loaded"] {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

#content {
	min-height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* MENU */
#meta-menu {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1vmin;
    left: 1vmin;
    z-index: 9999;
    transition: opacity 1s cubic-bezier(.33,.63,.14,.99);
}

.hide-ui #meta-menu, .hide-ui #objectives {
    opacity: 0 !important;
}

.loaded #meta-menu {
    opacity: 1;
}

#meta-icon {
    width: 80px;
    height: 80px;
    background-image: url(/img/textures/overlay.gif);
    border-radius: 100%;
    animation: SPIN 20s linear infinite;
    animation-play-state: paused;
    cursor: pointer;
}

#meta-icon:after {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url(/img/mui/mindspikelogo.gif);
    background-size: contain;
    background-position: center;
    transform-origin: center;
    animation: SPIN 40s linear infinite;
    animation-play-state: paused;
}

#meta-menu:hover #meta-icon, 
#meta-menu:hover #meta-volume:after, 
#meta-menu:hover #mui-links:after,
.expand-menu #meta-icon, 
.expand-menu #meta-volume:after, 
.expand-menu #mui-links:after {
	animation-play-state: running;
}

#meta-menu .ci-vol, 
#meta-menu .ci-bars, 
#meta-menu .moth-trigger,
#meta-menu #meta-mask {
    color: var(--bright-color);
    position: absolute;
    font-size: 1.5em;
    transition: opacity 1s cubic-bezier(.33,.63,.14,.99);
    opacity: 0.4;
    text-shadow: 0.5px 0.5px var(--dark-color), -0.5px 0.5px var(--dark-color), 0.5px -0.5px var(--dark-color), -0.5px -0.5px var(--dark-color);
}

#meta-menu .ci-vol {
    right: -1em;
    font-size: 1.4em;
    padding: 0.1em;
}

#meta-menu .ci-bars {
    bottom: -1.3em;
    cursor: initial;
    font-size: 1em;;
}

#meta-obs i {
    font-size: 0.8em;
    padding: 0.2em;
}

#meta-sys i {
    font-size: 0.7em;
    padding: 0.25em;
}

.mui-prohibited #meta-icon {
    filter: grayscale(1);
    cursor: not-allowed;
}

#mui-links, #meta-volume, #meta-links {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	overflow: hidden;
	border-bottom-right-radius: 50px;
}

#meta-volume {
    top: 50%;
    left: 50px;
    height: 40px;
    padding-left: 50px;
    padding-right: 10px;
    z-index: -1;
    transition: transform 1s cubic-bezier(.33,.63,.14,.99);
    transform-origin: left center;
    transform: scaleX(0.001) translateY(-50%);
    border-top-right-radius: 50px;
}

#meta-volume-toggle {
    cursor: pointer;
}

#meta-volume input {
    -webkit-appearance: none;
    width: 80px;
    height: 5px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-left: 2px solid var(--bright-color);
    outline: none;
    padding: 10px 0;
    border-radius: 50px;
    cursor: pointer;
}

#meta-volume input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-radius: 100%;
    border: 2px solid var(--bright-color);
    background: var(--dark-color);
}

#meta-volume input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    border-radius: 100%;
    border: 2px solid var(--bright-color);
    background: var(--dark-color);
}

#meta-volume:before, #mui-links:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#meta-volume:before {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgb(0, 0, 0) 50%);
}

#meta-volume:after, #mui-links:after {
    content: "";
    position: absolute;
    top: -15vh;
    left: -15vw;
    height: 30vh;
    width: 30vw;
    background: url(/img/textures/overlay.gif);
    animation: SPIN 20s linear infinite;
    transform-origin: center;
    animation-play-state: paused;
    z-index: -2;
}

.meta-volume-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.meta-volume-wrapper span {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    font-size: 0.75em;
    opacity: 0.75;
    padding: 0 0.75em;
}

.meta-volume-wrapper:nth-child(1) input {
    --bright-color: var(--neutral-color);
}

.meta-volume-wrapper:nth-child(2) input {
    --bright-color: var(--friend-color);
}

.meta-volume-wrapper:nth-child(3) input {
    --bright-color: var(--obesk-color);
}

#meta-menu:hover .ci-vol, 
#meta-menu:hover .moth-trigger,
.expand-menu .ci-vol, 
.expand-menu .moth-trigger {
    opacity: 1;
}

#meta-menu:hover #meta-volume,
.expand-menu #meta-volume {
    transform: translateY(-50%);
}

#meta-menu:hover .ci-bars,
.expand-menu #meta-menu .ci-bars {
    opacity: 0;
}

#meta-menu .moth-trigger, #meta-menu #meta-mask {
    bottom: 0;
    right: 0;
    transform: translate(66%, 50%);
    cursor: pointer;
    transform-origin: top left;
    transition: transform 1s ease-in-out;
}

#meta-links {
    flex-direction: column;
    overflow: visible;
	top: calc(100% - 20px);
	left: 50%;
	transform: scaleY(0.001) translateX(-50%);
	transform-origin: top center;
	transition: transform 1s cubic-bezier(.33,.63,.14,.99);
	z-index: -1;
}

#mui-links, #cyst-links {
    position: relative;
	flex-direction: column;
	justify-content: flex-start;
	padding: 30px 5px 10px;
	width: 40px;
	border-bottom-left-radius: 50px;
}

#meta-links a {
    color: var(--obesk-color);
    font-size: 2em;
    margin: 0 0 0.75em;
	transition: transform 1s cubic-bezier(.33,.63,.14,.99);
	transform: rotateY(-270deg);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	cursor: pointer;
}

#meta-links a i {
    pointer-events: none; /*prioritizes parent for events*/
}

#meta-links a:hover i {
    color: var(--bright-color);
}

#meta-links a:after, 
#meta-menu .moth-trigger:after,
#meta-menu .mask-trigger:after {
	position: absolute;
	bottom: 0;
	font-size: 0.4em;
	font-family: spacemono, sans-serif;
	transition: transform 1s cubic-bezier(.33,.63,.14,.99), opacity 1s ease-in;
	z-index: -1;
	transition-delay: 1s;
	transform: scale(0.001);
	opacity: 0;
    text-shadow: 1px 1px var(--dark-color);
}

#meta-menu .moth-trigger:after,
#meta-menu .mask-trigger:after { 
    content: "MTH"; 
    left: 0;
    right: 0;
    text-align: center;
    transition-delay: 0s;
}
#meta-menu .mask-trigger:after { content: "MASK" }
#mui-links #meta-obs:after { content: "ENT"; }
#mui-links #meta-sys:after { content: "SYS"; }
#mui-links #meta-hub:after { content: "NAV"; }

#mui-links a:nth-child(1) {
	transition-delay: 0.25s;
	color: var(--bright-color);
}

#mui-links a:nth-child(2) {
	transition-delay: 0.5s;
	color: var(--neutral-color);
}

#mui-links a:nth-child(3) {
	transition-delay: 0.75s;
	color: var(--obesk-color);
}

#mui-links:after {
	top: -5vh;
	animation-direction: reverse;
}

#mui-links:before {
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgb(0, 0, 0) 50%);
}


/* MASK TRIGGER - unlocked by a body class, which also influences the MTH button position */
#meta-menu #meta-mask {
    display: none;
    transform: translate(25%, 110%);
    z-index: 1;
}

.masksunlocked #meta-menu #meta-mask {
    display: block;
}

#meta-menu .mask-trigger, #meta-menu .mask-trigger::before {
    display: inline-block;
    transition: transform 1s ease-in-out;
}

body:not(.in-menu) #meta-menu:hover #meta-mask,
body[menu="masks"].in-tiny-menu #meta-menu #meta-mask {
    transform: translate(60%, 220%);
    opacity: 1;
}

body:not(.in-menu) #meta-menu:hover .mask-trigger,
body[menu="masks"].in-tiny-menu #meta-menu .mask-trigger {
    transform: scale(1.2);
    z-index: 2;
    position: relative;
}

#meta-menu:hover .mask-trigger {
    color: var(--neutral-color)
}
  
body[menu="masks"].in-tiny-menu #meta-menu .mask-trigger {
    color: var(--obesk-color);
    filter: drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 5px black);
    transform: translate(6em) scale(1.2);
}

body[menu="masks"].in-tiny-menu #meta-menu .mask-trigger::after {
    content: "CLOSE"
}

body[menu="masks"].in-tiny-menu #meta-menu .mask-trigger::before {
    transform: rotateY(180deg);
}

.masksunlocked #meta-menu .moth-trigger {
    transform: translate(105%, 5%);
}

body:not(.in-menu).masksunlocked #meta-menu:hover .moth-trigger,
body:not(.in-menu).masksunlocked.expand-menu #meta-menu .moth-trigger {
    transform: translate(175%, 40%) scale(1.2);
    opacity: 1;
    color: var(--friend-color)
}  
/* END MASK */

#meta-menu:hover #cyst-links,
.expand-menu #cyst-links {
    transform: scale(1) rotate(360deg)
}

#meta-menu:hover #cyst-links::after,
.expand-menu #cyst-links::after {
    animation-play-state: running;
}

body.in-menu #meta-menu .ci-bars, 
body.in-menu #meta-menu .moth-trigger,
body.in-menu #meta-menu #meta-mask {
    opacity: 0;
    pointer-events: none;
}

body:not(.in-menu) #meta-menu:hover #meta-links,
body:not(.in-menu).expand-menu #meta-links {
	transform: translateX(-50%);
}

body:not(.in-menu) #meta-menu:hover #meta-links a,
body:not(.in-menu).expand-menu #meta-links a  {
	transform: rotateY(0);
}

body:not(.in-menu) #meta-menu:hover #meta-links a:after, 
body:not(.in-menu) #meta-menu:hover .moth-trigger:after,
body:not(.in-menu) #meta-menu:hover .mask-trigger:after,
body:not(.in-menu).expand-menu #meta-menu #meta-links a:after, 
body:not(.in-menu).expand-menu #meta-menu .moth-trigger:after,
body:not(.in-menu).expand-menu #meta-menu .mask-trigger:after,
body[menu="masks"].in-tiny-menu #meta-menu .mask-trigger:after  {
	transform: translateY(100%);
	opacity: 1;
}

body:not(.in-menu) #meta-menu:hover .moth-trigger,
body:not(.in-menu, .masksunlocked).expand-menu #meta-menu .moth-trigger {
    color: var(--friend-color);
    transform: translate(66%, 50%) scale(1.2);
}

body[state="corru-loaded"] .moth-trigger, 
body[state="corru-loaded"] #meta-obs, 
body[state="corru-loaded"] #meta-hub,
body.mui-prohibited .moth-trigger, 
body.mui-prohibited #meta-mask, 
body.mui-prohibited #meta-obs, 
body.mui-prohibited #meta-hub, 
body.nomoth .moth-trigger, 
body.noent #meta-obs,
body.nomenus .moth-trigger,
body.nomenus #meta-links, 
body.nomenus #meta-menu .ci-bars,
body.nomenus .mask-trigger, 
body.nomenus #meta-mask, 
body.nosys #meta-sys {
    display: none !important;
}

/* special moth callout */
#meta-menu .moth-trigger.newthoughts {
    color: var(--friend-color);
    opacity: 0.8;
}

.moth-trigger .mothnotice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.moth-trigger.newthoughts .mothnotice {
    display: block;
    border-radius: 100%;
    color: var(--neutral-color);
    pointer-events: none;
    z-index: -1;
    animation: GROWPULSE 2s steps(15) infinite;
    text-shadow: 0px 0px 10px;
}

@keyframes GROWPULSE {
    0% { transform: scale(0.001); opacity: 0;}
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0;}
}

/* MENUS */
.menu-box {
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    background: var(--dark-color);
    transition: transform 400ms ease-in-out;
    z-index: 20;
    transform: translateX(55vw);
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
	scroll-behavior: smooth;
    font-family: "spacemono", monospace;
    padding: 1em;
}

.active-skipping .menu-box {
    transition: unset !important;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: barcodetext;
    font-size: 2em;
    color: var(--neutral-color);
    background-color: var(--dark-color);
    width: auto;
    padding: 0.25em;
    border: 1px solid;
    cursor: pointer;
    text-transform: uppercase;
}

.button:hover {
    color: var(--dark-color);
    background-color: var(--neutral-color);
}

.button[disabled], .button[disabled]:hover {
    opacity: 0.5;
    color: var(--bright-color);
    background: var(--dark-color);
    cursor: not-allowed;
    pointer-events: initial;
    border: 2px dashed;
}

.buttons .button {
    flex-basis: 5em;
    flex-grow: 1;
}

.buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}

.menureturn {
    width: 7em;
    order: -10;
}

.menu-box h3, .menu-box summary {
    text-align: center;
    font-size: 3em;
    font-family: barcodetext;
    margin-bottom: 0.35em;
}
  
/* ENTITY MENU */
#entity-menu {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

body[menu="entities"].in-menu #entity-menu, 
body[menu="entities"].in-menu #entity-details {
    transform: translateX(0vw);
    pointer-events: initial;
}

.pagelist {
    display: flex;
    flex-direction: column;
}

.page {
    margin-top: 2em;
    border: 1px solid;
    color: var(--neutral-color);
    order: var(--pageOrder)
}

.pageheader {
    display: block;
    font-family: barcodetext;
    font-size: 2em;
    padding: 1em 0.25em;
    color: var(--neutral-color);
    background: url(/img/textures/fadein.gif), var(--pageImg);
    background-position: top, center;
    background-size: cover;
    border-bottom: 1px solid;
    cursor: pointer;
}

.pageheader > span, .page.collapsed .pageheader:hover > span {
    background: var(--neutral-color);
    color: var(--dark-color);
    padding: 0.5em;
    border: 1px solid;
}

.page.collapsed .pageheader > span {
    background: var(--dark-color);
    color: var(--neutral-color);
}

.page.collapsed .pageents-wrapper {
    max-height: 0vw;
    border-bottom-color: transparent;
}

.pageents-wrapper {
    overflow: hidden;
    transition: max-height 200ms ease-in-out;
    max-height: calc(10vw * var(--entRows));
}

.pageents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1em;
    margin-top: 0.5em;
}

.pageents > .ent {
    width: 15%;
    padding-top: 15%;
    margin: 5px;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    color: var(--neutral-color);
    transition: transform 100ms ease-in-out;
    background-image: url(/img/textures/static.gif);
}

.page.collapsed .ent {
    transform: translateY(calc(150% * var(--entRows)));
}

.ent.scanned {
    cursor: pointer;
}

.ent.scanned:hover {
    opacity: 0.8;
    border-color: var(--neutral-color);
}

.ent.unscanned {
    color: var(--obesk-color);
    border: 2px solid;
}

.pageents > .ent > img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    pointer-events: none;
}

.pageents > .ent:not(.ent[class*="portrait"]) > img { /* if no portrait controls, default sizing */
    object-fit: none;
}

/* ent image fixes */
.page[page="THEEMBASSY"] .akizet.scanned img {
    object-position: top;
    object-fit: cover;
}

.page[page="THEEMBASSY"] .qou.obesk img, .page[pagename="THEEMBASSY"] .attendant img {
    object-fit: cover;
}

/* special hiding/showing - intended for ent pages, but can be used on regular entities too */
body:not(.ep1) .ep1on, /* after feeding only */
body:not(.ep2) #entity-menu .thoughtform.collapse, /* after collapse can be unlocked only */
body:not(.ep2) .ep2on, 
body:not(.ep3) .ep3on, /* after golem is unlocked */
body:not(.ep4) .ep4on, /* groundsmindry unlocked */
body:not(.masksunlocked) .maskon,
body:not(.hungerunlocked) .hungeron,
body:not(.joyunlocked) .joyon,
body:not(.freedomunlocked) .freedomon
{ 
    display: none !important;
}

/* ENTITY MENU DETAILS */
#entity-details {
    left: 0;
    right: unset;
    transform: translateX(110vw);
    background: transparent;
    background-image: url(/img/textures/fadeinlonghalf.gif);
    background-size: auto 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    font-size: 0.75rem;
}

#entbox {
    width: 100%;
    height: 0px;
    padding-top: 100%;
    border-radius: 100%;
    background: url(/img/textures/panelpattern.gif);
    position: relative;
    transform: scale(0.001) rotate(180deg);
    transition: transform 1s ease-in-out;
    transition-delay: 400ms;
}

body[menu="entities"] #entbox {
    transform: scale(1)
}

#entcontent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    line-height: 1.5em;
}

#entcontent .message {
    width: 80%;
}

#entcontent .message.loose-thought h2 {
    margin-bottom: 1em;
}

#entcontent .message h2 {
    line-height: 1em;
} 

/* SYSTEM MENU */
body[menu="system"] #system-menu, :root.bigmode body[menu="system"] #system-menu {
    transform: translate(0);
    pointer-events: initial;
    z-index: 40;
}

.sysblock {
    color: var(--neutral-color);
    border: 1px solid;
    margin-top: 1em;
    padding: 0;
}

#system-menu summary, #system-menu h3, #system-menu .button {
    text-transform: uppercase;
}

.system-version {
    cursor: alias;
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.75;
}

.sysblock h3 {
    width: 100%;
    font-size: 2.5em;
}

.sysbox h4 {
    text-align: center;
    margin: 0.5em;
    font-size: 1em;
    text-transform: uppercase;
    color: var(--neutral-color);
}

.sysblock.meta h4 {
    color: var(--friend-color);
}

.sysbox h4:first-child {
    margin-top: 0;
}

.sysblock summary {
    cursor: pointer;
}

details.sysblock[open] {
    background: url(/img/textures/panelpatterntranflip.gif), var(--neutral-color);
    padding: 1em;
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: repeat-x;
}

details.sysblock[open] .sysbox, details.sysblock[open] details {
    color: var(--neutral-color);
    background: var(--dark-color);
}

.sysblock:not([open]) summary {
    padding: 0.5em;
    margin-bottom: 0;
}

.sysblock summary::marker {
    content: "";
    display: none;
}

.sysblock summary::before {
    content: "➤";
    display: inline-block;
    position: absolute;
    left: 2rem;
    transform: translateY(25%)
}

#system-menu details[open] > summary::before {
    content: "⮟";
}

#system-menu details.minor summary {
    font-size: 1.75em;
    border: 1px solid;
    padding: 0.25em;
    position: relative;
}

#system-menu details.minor summary::before {
    left: 0.5em;
}

.minor.loadstring summary {
    margin-bottom: 0;
}

.stringinput {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

.stringinput #import {
    margin: unset;
    width: auto;
}

#system-menu .sysinfo {
    font-size: 0.85em;
    color: var(--bright-color);
    padding: 0 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

#savetext {
    text-align: center;
    border: 1px solid var(--neutral-color);
    background: var(--bright-color);
    padding: 0.5em;
    font-family: barcodetext, sans-serif;
    line-height: 1em;
    font-size: 2em;
    display: block;
    width: 100%;
    border: 1px solid;
}

.modstring .stringinput {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75em;
}

#modtext {
    min-width: 30vw;
    max-width: 100%;
    min-height: 100px;
    max-height: 400px;
    transition: unset;
}

.sysblock .button {
    margin: 0.5em 0.25em;
    width: 5em;
}

.sysblock .button:first-of-type:not(:last-child) {
    margin-left: 0;
}

.systoggles > div {
    flex-basis: 300px;
    flex-grow: 1;
}

.systoggles {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.sysblock .systoggles .sysbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 1em;
}

.systoggles .sysbox .sysinfo {
    font-size: 0.85rem;
}

.systoggles .button {
    margin: 0.5em 0.25em 0 0.25em;
}

.button.import {
    position: relative;
}

#fileInput {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

#delete {
    color: var(--obesk-color);
    border-style: dashed;
}  

.sysblock .sysbox {
    color: var(--friend-color);
    border: 1px solid;
    padding: 1em;
}

.sysbox ~ .sysbox {
    margin-top: 1em;
}

.sysblock .sysbox > span {
    line-height: 1.25em;
    color: var(--bright-color);
    text-align: center;
    display: block;
    font-size: 0.75em;
    letter-spacing: 0.05em;
}

.sysinfo ~ .sysinfo {
    margin-top: 1em;
}

.sysblock .warning.sysbox {
    color: var(--obesk-color);
}

.warning h3::after, .warning h3::before {
    content: "⚠";
    margin: 0 1em;
    display: inline-block;
    animation: SPIN-Y 5s linear infinite;
    animation-play-state: paused;
    --baseTransform: translateY(0.25em);
}

body[menu="system"] .warning h3::after, 
body[menu="system"] .warning h3::before {
    animation-play-state: running;
}

.sysbox.widescreen { display: none !important }
body[wide="adapted"] .sysbox.widescreen { display: flex !important }
@media screen and (min-width: 1921px) { .sysbox.widescreen { display: flex !important } }
@media screen and (min-height: 1081px) { .sysbox.widescreen { display: flex !important } }

.ulbox, .sysbox.ulbox {
    display: flex;
    justify-content: center;
    border: 1px dashed;
    margin-bottom: 1em;
}

.ulbox ul {
    border: inherit;
    padding: 1em;
}

.sysbox.specs {
    display: flex;
    flex-wrap: wrap;
    color: var(--bright-color);
    border-color: var(--bright-color);
    padding: 0;
    margin-top: 1em;
}

.sysbox.specs h4 {
    width: 100%;
    border: inherit;
    margin: 0;
    padding: 1em;
}

.sysbox.specs ul {
    columns: 2;
    width: 100%;
    column-fill: balance;
}

.sysbox.specs li {
    margin: 0.25em 0;
    text-align: justify;
    text-align: left;
    line-height: 1.25em;
    break-inside: avoid-column;
}

.sysbox.specs li span {
    color: var(--friend-color);
}

.sysbox.specs em {
    font-size: 0.5em;
}

.sysbox.support {
    margin-top: 1em;
    color: var(--bright-color);
}

.support .buttons .button {
    flex-basis: 45%;
    flex-grow: 1;
    width: auto;
    margin: 0;
}

.support .buttons {
    gap: 1em;
}  

.kofi.button, .merch.button {
    color: var(--fundfriend-color);
}

.audio.button {
    color: var(--friend-color);
}

.supportercredits.button {
    color: var(--neutral-color)
}

.b8831 {
    display: block;
    text-align: center;
}

.sysbox.credits {
    padding: 0;
    border: 0;
}

.devs {
    display: flex;
    justify-content: center;
}

.devs ul {
    flex-basis: 33%;
    flex-grow: 1;
    text-align: center;
}

.devs li {
    margin: 0.5em;
}

.devs a, .devs li span {
    font-family: barcodetext;
    color: var(--bright-color);
    font-size: 2em;
    text-transform: uppercase;
    border-bottom: 1px solid;
    position: relative;
}

.devs a::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--dark-color);
    color: var(--bright-color);
    border-radius: 100%;
    display: block;
    left: 50%;
    top: 0;
    --baseTransform: translate(-50%, -110%);
    background-image: url('/img/da_fiend.png');
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

.devs a[href*="pocl"]::after {
    background-image: url('/img/da_pocl.png');
}

.devs a[href*="jack"]::after {
    background-image: url('/img/da_tonk.png');
}

.devs a[href*="fyi"]::after {
    background-image: url('/img/da_sha.png');
}

.devs a[href*="redrealm"]::after {
    background-image: url('/img/da_fool.png');
}

.devs a:hover::after {
    animation: SHAKE 250ms linear infinite;
    opacity: 1;
}

.supporters {
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  
.supporters h4 {
    border-bottom: 1px dashed var(--bright-color);
    padding-bottom: 5px;
    cursor: alias;
}

#iconsupporters {
    display: none;
    justify-content: center;
    flex-wrap: wrap;
}

body[menu="system"] #iconsupporters { /* in case animations slow anything down */
    display: flex;
}

.fundfriend {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: alias;
    padding: 5px;
    width: 1.25em;
    height: 1.25em;
    font-size: 2em;
    border: 2px outset;
    color: var(--fundfriend-color);
    background: url(/img/textures/spotgradientinversemicro.gif), url(/img/textures/hazeflowtiny.gif), url(/img/textures/fresnelftiny.gif);
    background-size: 100%;
    box-shadow: 0px 0px 10px var(--obesk-color);
    animation: SPIN-Y 30s linear infinite;
    overflow: hidden;
    border-radius: 100%;
    margin: 0.25em;
}

.fundfriend span {
    position: absolute;
    font-family: beech;
    pointer-events: none;
    display: inline-block;
    text-transform: lowercase;
    transform: scale(0.75) rotate(20deg);
    font-size: 0.65em;
    text-shadow: 1px 1px var(--dark-color), -1px 1px var(--dark-color), 1px -1px var(--dark-color), -1px -1px var(--dark-color);
}

.fundfriend span ~ span {
    text-transform: uppercase;
    font-size: 0.45em;
}

.fundfriend span:nth-child(2) {
    transform: translate(10%, 50%) rotate(-135deg);
    z-index: 2;
}

.fundfriend span:nth-child(3) {
    transform: translate(-10%, -50%) rotate(135deg);
    z-index: -2;
}

.sysblock .nonsense {
    font-family: barcode;
    line-height: 0.6em;
    text-align: justify;
    display: block;
    font-size: 16px;
}

body[quality="regular"] #quality-select .button[quality="regular"],
body[quality="low"] #quality-select .button[quality="low"],
body[wide="adapted"] #quality-select .button[wide="on"],
body[wide="false"] #quality-select .button[wide="off"],
body[low_intensity="true"] #control-select .low-intensity,
body[low_intensity="false"] #control-select .reg-intensity,
body[gameplay_off="true"] #control-select .gameplay-off,
body[gameplay_off="false"] #control-select .gameplay-on,
:root:not(.bigmode) #quality-select .normal-size,
:root.bigmode #quality-select .large-size,
#system-menu .button.primary:hover {
    color: var(--dark-color);
    background: var(--friend-color);
}

#system-menu details[open] summary:hover {
    text-decoration: underline;
}

#system-menu details:not([open]) summary:hover, 
#system-menu .button:hover {
    background: var(--neutral-color);
    color: var(--dark-color);
}

#system-menu .button.primary {
    background: var(--dark-color);
    color: var(--friend-color);
}

.center {
    text-align: center;
    justify-content: center;
}
  
/* DIALOGUE MENU */
.in-dialogue #dialogue-box {
    transform: translateX(0vw);
    pointer-events: initial;
}

#dialogue-box {
    width: 30vw;
    padding: 0;
    padding-bottom: 15vh;
    transform: translateX(50vw);
    z-index: 20;
}

body[state="corru-loaded"].in-dialogue #dialogue-box {
    z-index: 30;
}

#dialogue-box.dialogue-click-proceed {
    cursor: pointer;
}

#dialogue-box.dialogue-click-proceed::after {
    content: "VVV CLICK/ENTER TO PROCEED VVV";
    display: block;
    width: 100%;
    text-align: center;
    animation: click-to-proceed 1s linear infinite;
}

#dialogue-box.can-skip::before {
    content: "LINEAR STREAM SEGMENT - SKIPPABLE WITH ESC";
    display: block;
    text-align: center;
    padding: 0.5em;
    color: var(--neutral-color);
    font-size: 0.75rem;
    opacity: 0.5;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--dark-color);
}

#dialogue-box.chatterlogue {
    width: 25vw;
}

body.in-chatterlogue #dialogue-box.chatterlogue {
    transform: unset;
    border-left: 2px dashed;
}

#dialogue-box.chatterlogue {
    background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%); /* todo: proper dither */
    pointer-events: initial;
}


@keyframes click-to-proceed {
    0% { opacity: 0; transform: translateY(-10px)}
    25% { opacity: 1; transform: translateY(-5px)}
    50% { opacity: 1; transform: translateY(0px)}
    75% { opacity: 1; transform: translateY(5px)}
    100% { opacity: 0; transform: translateY(10px)}
}

.in-menu #content {
    transform: translateX(var(--contentDialogueOffset));
}

.dialogue-message, .dialogue-actor {
    --color: var(--bright-color);
    --background: var(--dark-color);
    font-size: 1rem;
    letter-spacing: 0.25px;
    color: var(--color);
    margin: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transform: translateX(-120%);
    transition: transform 400ms ease-in-out;
}

.dialogue-actor {
    transition: transform 400ms ease-in-out, max-height 200ms ease-in-out;
    max-height: 600px;
    overflow: hidden;
}

.dialogue-menu .dialogue-actor:not(.chosen) {
    max-height: 0px;
}

.dialogue-actor.chosen span:not(.chosen) {
    opacity: 0.25;
}

.dialogue-options > span.chosen {
    color: var(--bright-color);
    background: var(--dark-color);
}

.dialogue-message.sent, .dialogue-actor.sent, .dialogue-message.from-player.sent {
    transform: translateX(0%);
}

.dialogue-message .dialogue-text {
    flex-basis: 70%;
    flex-grow: 1;
    display: block;
    border: 1px solid;
    border-color: inherit;
    padding: 0.6em;
    margin: 0.6em;
    background: var(--background);
    color: var(--color);
    position: relative;
    word-break: break-word;
    line-height: 1.1;
}  
  
.dialogue-text p {
    word-break: break-word;
    margin: 0.6rem 0;
}

.dialogue-text p:last-child {
    margin-bottom: 0;
}

.dialogue-text p:first-child {
    margin-top: 0;
} 

.dialogue-portrait {
    flex-basis: 15%;
    border-radius: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: inherit;
    background-size: cover;
    background-position: center;
}

.dialogue-portrait::after {
    content: "";
    display: block;
    padding-top: 93%;
    width: 100%;
    border-radius: 100%;
    background-image: var(--background-image);
    background-size: cover;
    border-color: inherit;
    border-style: double;
}

.dialogue-portrait::before {
    content: "";
    position: absolute;
    right: -0.95em;
    height: calc(100% - 5em);
    width: 50%;
    border: 0.32rem double;
    border-left: unset;
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
    border-color: var(--color);
    z-index: -1;
    border-color: inherit;
}

.from-player.dialogue-message .dialogue-text {
    text-align: right;
    align-items: flex-end;    
}

.from-player.dialogue-message, .dialogue-actor {
    transform: translateX(120%);
    transform-origin: right;
}

.from-player .dialogue-portrait, .dialogue-actor .dialogue-portrait {
    order: 2;
}

.from-player .dialogue-portrait:before, .dialogue-actor .dialogue-portrait:before {
    right: unset;
    left: -0.95em;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
}

#dialogue-menu {
    margin-top: 1em;
    border-top: 1vh double var(--bright-color);
}

.dialogue-menu {
    opacity: 0.5;
    pointer-events: none;
}

.dialogue-actor .dialogue-portrait {
    flex-basis: 10%;
}
  
.dialogue-options {
    flex-basis: 70%;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border: 0.32rem double;
    padding: 0.25rem;
    margin: 0.25rem;
    background: var(--dark-color);
    border-color: inherit;
    text-align: center;
}  
  
.dialogue-options .reply {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bright-color);
    color: var(--dark-color);
    padding: 0.32rem;
    margin: 0.32rem;
    border: 0.32rem double;
    border-color: inherit;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

.reply[read="hidden"] { /* the read state is hidden - meaning it's a dynamic option */
    border-radius: 20px;
    border-bottom-style: ridge;
    border-bottom-color: var(--neutral-color)
}

.reply[read="read"] { /* the read state is true - meaning it's been read already */
    border-top-right-radius: 20px;
    border-right-color: var(--obesk-color);
}

.reply[read="unread"] { /* the read state is false - meaning it's not read yet */
    border-top-left-radius: 20px;
    border-left-color: var(--friend-color);
    box-shadow: -5px 0px 5px var(--friend-color)
}

.reply[read="within"] { /* the read state is kinda false - meaning it has something within that hasn't been used yet */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;  
    box-shadow: 0 -2px 10px var(--friend-color);
    border-right-color: var(--obesk-color);
    border-left-color: var(--friend-color);
}

/* certain "changeread" replies like moth's questions get special styling to signify they're a little unique*/
.reply.changeread[read] {
    border-radius: 20px;
    border: 5px double;
    border-bottom-style: ridge;
}
.reply.changeread[read="read"] {border-bottom-color: var(--obesk-color); border-bottom-width: 3px;}
.reply.changeread[read="unread"], .reply.changeread[read="within"] {border-bottom-color: var(--friend-color)}

.dialogue-options .reply:hover {
    transform: translateY(-0.32rem);
}

.dialogue-options .reply::after {
    display: block;
    font-size: 0.63rem;
}
  
.dialogue-options .reply.end-reply {
    background: var(--dark-color);
    color: var(--bright-color);
}

.dialogue-options .reply.end-reply::after {
    content: attr(endtext);
}

/* global actors */
.dialogue-message.actor-sourceless {
    text-align: center;
    text-transform: uppercase;
    --background: var(--bright-color);
    --color: var(--dark-color);
}

.actor-sourceless .dialogue-text {
    align-items: center;
    text-transform: uppercase;
}

.readout-log .sourceless [definition], #dialogue-box .sourceless [definition]:not(.reply), .sourceless.message [definition] {
    border-bottom: 2px dashed;
    margin-bottom: 2px;
}

.actor-moth .dialogue-portrait::after {
    background: url(/img/sprites/moth/mothman.gif), linear-gradient(to bottom, rgba(255, 255, 255, 0.71), var(--friend-color));
    background-size: 150%, auto;
    background-position: center top;
    background-repeat: no-repeat;
}

.dialogue-message.actor-self {
    --background: var(--bright-color);
    --color: var(--dark-color);
    font-family: barcodetext;
    align-items: center;
    font-size: 2.5rem;
}

.dialogue-message.actor-self .dialogue-text {
    padding: 0.33em;
    text-align: center;
    text-transform: uppercase;
}

.dialogue-message.actor-sys {
    --color: var(--dark-color);
    --background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%), url(/img/textures/warp.png), url(/img/textures/static.gif);
    border-color: var(--bright-color);
    font-family: barcodetext, monospace;
    font-size: 2.3rem;
    text-shadow: 0px 0px var(--neutral-color); /* adjustment by octo */
}

.actor-sys .dialogue-portrait::after {
    background-position: center;
    background: url(/img/mui/mindspikelogoactive.gif), url(/img/textures/static.gif);
    background-size: 100%;
    background-position: center;
    animation: SPIN 30s linear infinite;
}

.actor-sys .dialogue-text {
    text-align: center;
    align-items: center;
    line-height: 1.25em;
    background-size: auto 100%;
}

.actor-movefriend, .actor-timestopper, .timestopper {
    text-transform: uppercase;
}

.dialogue-message.obesk {
    --background: url(/img/textures/corruripple.gif);
    --color: var(--obesk-color);
    text-shadow: 1px 1px var(--bright-color);
    font-size: 1.25em;
    letter-spacing: 0.25em;
}

.dialogue-message.obesk [definition] {
    border-bottom: 1px dashed var(--bright-color) !important;    
}

.dialogue-message.uppercase {
    text-transform: uppercase;
}

.obesk .dialogue-portrait {
    background-image: url(/img/textures/corruripple.gif);
    background-size: cover;
    border-radius: 100%;
}

.dialogue-message.qou, .dialogue-message.larval {
    --background: var(--dark-color);
    text-shadow: unset;
    letter-spacing: 0;
    font-size: 1em;
    line-height: 1.5em;
    text-transform: lowercase;
}

.dialogue-message.larval {
    font-size: 1rem;
}

.larval .dialogue-portrait, .larval.message img {
    background-image: url(/img/textures/ccontours.gif);
}

.qou .dialogue-portrait {
    background-image: url(/img/textures/corrurippletran.gif);
    background-color: var(--bright-color);
}

.blocker .dialogue-portait {
    background-image: url(/img/textures/blocker.gif);
}

.dialogue-message.qou.akizet {
    letter-spacing: 0.25em;
}

.funfriend .dialogue-portrait::after {
    background-position: center;
    background-size: 150%;
}

.funfriend .dialogue-text {
    background-image: url(/img/textures/static.gif);
    background-position: center;
    background-size: 100%;
    text-shadow: 1px 1px var(--dark-color), 2px 2px 2px var(--friend-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#dialogue-box .funfriend [definition] {
    border-bottom: 2px dashed var(--dark-color) !important;
}

.funfriend.message, .message.uppercase {
    text-transform: uppercase;
}

.actor-unknown, .readout-log .message.velzie {
    --background: var(--bright-color);
    --color: var(--dark-color);
    font-family: beech;
    text-transform: lowercase;
    letter-spacing: 0.25em;
    font-size: 1.5em;
    text-align: center;
}

.actor-unknown .dialogue-portrait::after {
    background-color: var(--bright-color);
    background-size: 25%;
    background-position: center;
    background-repeat: no-repeat;
}

.readout-log .message.velzie {
    background: white;
    color: black;
    text-align: center;
}

#readout .message.velzie, .readout-log .message.velzie img, .readout-log .message.velzie h2 {
    display: none;
}

.dialogue-message.incoherent .dialogue-text, 
.readout-log .message.incoherent {
    text-shadow: 1px 1px var(--dark-color), 2px 2px var(--dark-color), 2px 2px var(--dark-color), 2px 2px var(--dark-color);
    letter-spacing: 0.75em;
    background: url(/img/textures/fadein.gif), url(/img/textures/corruripplegrayscale.gif);
    background-size: 150%, auto;
}

.readout-log .message.incoherent.cass,
.actor-cass.incoherent .dialogue-text {
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 70%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%), url(/img/textures/fadein.gif), url(/img/textures/corruripplegrayscale.gif);
    letter-spacing: 0.25em;
    font-family: serif;
}

.dialogue-message.incoherent-mild .dialogue-text,
.readout-log .message.incoherent-mild {
    letter-spacing: 0.25em;
}

.dialogue-message.actor-echo, .message.actor-echo {
    --background: var(--bright-color);
    --color: var(--dark-color);
    text-shadow: 1px 1px var(--friend-color);
    border-color: var(--friend-color);
    font-size: 1em;
    letter-spacing: 0.1em;
}

.dialogue-message.bstrd .dialogue-portrait::after {
    background-size: 125%;
    background-position: center;
}

.dialogue-message.bstrd, .message.bstrd {
    --bright-color: var(--bastard-color);
}

.dialogue-message.actor-bsteli {
    --color: var(--bastard-color);
    --background: linear-gradient(0deg, rgba(0,0,0,0.79) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 75%, rgba(0,0,0,0.9) 100%), url(/img/textures/stun.gif);
}

.dialogue-message.bstrd .dialogue-text, .dialogue-message.actor-bsteli.expression__bstrd .dialogue-text {
    font-family: bastard;
    font-size: 3em;
    margin: 0.5rem;
    padding: 0.3em;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.79) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 75%, rgba(0,0,0,0.9) 100%), url(/img/textures/stun.gif);
}

.dialogue-message.bstrd .dialogue-portrait::before {
    width: 100%;
    right: 0;
    border-radius: 0;
    transform: translateX(100%);
}

.dialogue-message.bstrd, .message.bstrd {
    color: var(--bright-color);
}  
    
.message.bstrd img {
    border-radius: 100%;
}

.message.bstrd p {
    font-family: bastard;
    font-size: 3em;
    line-height: 1em;
}

.bstrd [definition] {
    border-bottom: 2px dashed;
    padding-bottom: 5px;
}

.dialogue-message.actor-okidoia,
.dialogue-message.mutter,
.message[actor="okidoia"] {
    text-align: center;
    z-index: -1;
    position: relative;
}

.dialogue-message.actor-okidoia {
    transform: unset;
    transition: opacity 800ms ease-in-out;
    opacity: 0;
}

.dialogue-message.actor-okidoia.sent {
    opacity: 1;
}

.actor-okidoia .dialogue-text, 
.dialogue-message.mutter .dialogue-text,
.message[actor="okidoia"] {
    border: unset;
    background: transparent;
    color: var(--dark-color);
    letter-spacing: 0.5em;
    text-shadow: 1px 1px var(--friend-color), -1px 1px var(--neutral-color), 1px -1px var(--obesk-color), -1px -1px var(--obesk-color);
    position: relative;
    z-index: unset;
    padding: 1em 0.6em;
    font-size: 1.25em;
    text-transform: unset;
}

.actor-okidoia .dialogue-text::after, 
.dialogue-message.mutter .dialogue-text::after,
.message.mutter::after,
.message[actor="okidoia"]::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/img/mui/text/okiblock.gif);
    z-index: -2;
    background-size: 100% 100%;
    pointer-events: none;
}

.actor-okidoia span[definition] {
    border-bottom: 1px dashed black !important;
}

.actor-okidoia.expression__dark span[definition] {
    border-bottom: 1px dashed white !important;
}

.message[actor="okidoia"] h2 {
    display: none;  
}

.message.mutter, .message[actor="okidoia"] {
    overflow: visible !important;
} 

.message[actor="okidoia"] {
    font-size: 1.5em;
}

.dialogue-message.mutter {
    color: var(--bright-color);
    letter-spacing: 5px;
    text-transform: initial;
}

.dialogue-message.mutter .dialogue-text {
    text-shadow: unset;
    background: var(--dark-color);
    color: var(--bright-color);
    font-size: 1em;
    letter-spacing: unset;
}

.message.mutter {
    background: black;
    transform: unset !important;
    position: relative;
    border: unset !important;
    color: var(--bright-color) !important;
}

.dialogue-message.mutter .dialogue-text::after,
.message.mutter::after {
    background-image: url(/img/mui/text/okiblockdark.gif);
    z-index: -1;
}

.message.uppercase {
    text-transform: uppercase !important;
}

/* READOUT */
#readout {
	position: fixed;
	top: 0;
	left: 0;
	width: 25%;
	height: 100%;
    font-size: 0.75rem;
    padding: 15vh 0.5rem 0;
	overflow-y: auto;
    overflow-x: hidden;
	background: var(--dark-color);
	color: var(--bright-color);
	font-family: spacemono;
	transition: transform 1s cubic-bezier(.33,.63,.14,.99);
    transform: translateX(-100%);
	z-index: 25;
    scrollbar-color: #ffff00b5 var(--dark-color);
}

#readout.smoothscroll {
	scroll-behavior: smooth;
}

#readout::after {
	content: "";
	width: 100%;
	height: 20vh;
	display: block;
}

.readout-log .message {
	overflow: hidden;
    background: var(--dark-color);
	border: 1px solid;
	border-color: inherit;
	opacity: 0;
	transition: all 500ms ease-in-out, transform 1s cubic-bezier(.33,.63,.14,.99);
	transform: scaleY(0.001);
	transform-origin: top;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.25em;
}

.readout-log .message.active {
	opacity: 1;
	transform: scaleY(1);
	max-height: unset;
}

.readout-log .message p {
    margin-bottom: 0.5rem;
	width: 100%;
}

.readout-log .message p:first-child {
	margin-top: 0;
}

.readout-log .message p:last-child {
	margin-bottom: 0;
}

.readout-log .message h2 {
    font-size: 2.5em;
    line-height: 1em;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid;
    padding-bottom: 0.15em;
    width: 102%;    
	font-family: barcodetext;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: normal !important;
}

.readout-log .message h3 {
	font-family: barcodetext;
    text-transform: uppercase;
}

.readout-log .message img {
	float: left;
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 0.5rem;
	border: 1px solid;
	border-color: inherit;
    background-color: black;
    object-fit: none; /* believe it or not this actually crops it rather than just setting it to the horrible default stretch mode... looks so funny with some characters that I kept it */
}

#minireadout {
    position: fixed;
    bottom: 5vh;
    max-width: 80vh;
    font-size: 0.75rem;
    width: 500px;
    z-index: 1000;
	color: var(--bright-color);
	font-family: spacemono;
    pointer-events: none;
}

#minireadout .message {
    transform-origin: bottom;
}

#minireadout [definition] { /* cause you can't hover over these */
    border-bottom: unset !important;
}

.in-combat #minireadout {
    bottom: 40vh;
}

/* SPECIAL ACTORS */    
.readout-log .message.interloper, .readout-log .message.event {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bright-color);
    color: var(--dark-color);
}

.readout-log .message.interloper h2 {
    display: none;
}

.readout-log .message.interloper p {
    font-family: barcodetext;
    font-size: 1.75rem;
    line-height: 1.2em;
    margin-top: 0;
    text-transform: uppercase;
}

.readout-log .message.sourceless {
    text-align: center;
    background: var(--bright-color);
    color: var(--dark-color);
    text-transform: uppercase;
}

/* vestigial useMessage styling only for backwards compat */
.readout-log .message.sourceless.combat {
    padding: 0 0 0.5rem;
}

#minireadout .message.sourceless.combat {
    opacity: 0.9;
}

.readout-log .message.sourceless.combat.minordetail {
    opacity: 1;
    padding: 0.25em;
    background: var(--dark-color);
    color: var(--bright-color);
    margin: 0.25em 0;
}

.readout-log .message.sourceless.combat:not(.minordetail)::before {
    content: "::EXECUTION PROCEEDING::";
    color: var(--neutral-color);
    background: var(--dark-color);
    padding: 0.5em;
    display: block;
    margin-bottom: 0.25rem;
    border: 1px solid;
}

.readout-log .combat .action-description {
    font-size: calc(0.75em);
    border-bottom-width: 1px;
}

/* end vestigie wigies */
.sourceless.incoherent .dialogue-text {
    color: white;
}

.readout-log .message.event {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    text-align: center;
}

.readout-log .message.moth {
	border-color: var(--friend-color);
	color: var(--friend-color);
}

.readout-log .message.moth img {
    background: url(/img/sprites/moth/mothman.gif) white;
    background-size: 165%;
    background-position: center top
}

.readout-log .message.moth p {
	text-transform: lowercase;
}

.readout-log .message.sys {
    color: var(--neutral-color);
    border-color: var(--neutral-color);
	font-family: barcodetext;
    word-break: break-all;
    font-size: 2.5em;
    line-height: 1.25em;
}
  
.readout-log .message.sys img {
    height: 1.25em;
    object-fit: contain;
    background-image: url(/img/textures/static.gif) !important;
}

.readout-log .message.sys.navigation p {
    margin: 0;
}

.readout-log .message.obesk {
    color: var(--obesk-color);
}

.readout-log .message.obesk.echo {
    background: var(--bright-color);
    color: var(--dark-color);
    border-color: var(--friend-color);
    text-shadow: 1px 1px var(--friend-color);
}

.obesk.echo .definition {
    --bright-color: var(--dark-color);
}

.readout-log .message.obesk > img {
    border-radius: 100%;
}  

.readout-log .message.loose-thought h2 {
    width: 80%;
    padding-bottom: 0.15rem;
    line-height: 0.5em;
    font-family: barcode;
    white-space: nowrap;
    overflow: hidden;
}

.readout-log .message.loose-thought > span {
    color: var(--obesk-color);
    margin-top: 0.5em;
    display: inline-block;
}

.readout-log .message.examine {
    line-height: 1.25em;
    color: var(--neutral-color) !important;
}

.readout-log .message.examine img {
    border-radius: 0 !important;
}

.readout-log .message.ship img {
    object-fit: none;
    object-position: 42.5% -1%;
    background-image: url(/img/textures/static.gif);
}

.message.metafiend {
    color: white;
    background: blue;
    border-style: dashed;
    padding-bottom: 10px;
    font-family: cursive;
}

.message.metafiend img {
    animation: SHAKE 0.25s linear infinite;
    border-radius: 100%;
}

.message.metafiend h2 {
    font-size: 1rem;
    font-family: cursive;
}

.dialogue-message.incoherenthello .dialogue-text, .readout-log .message.incoherenthello {
    text-shadow: unset;
    min-height: 150px;
    color: transparent;
    border-color: var(--bright-color);
    background-image: url(/img/local/uncosm/hello.gif);
    background-size: 100% 100%;
    background-position: center;
    background-color: black;
}

.dialogue-message.awakened,
.message.awakened {
    --background: url(/img/textures/spotgradientinversewhite.gif), url(/img/local/uncosm/ozo/ozospiral_text.png), white;
    --color: var(--neutral-color);
}

.dialogue-message.awakened .dialogue-text,
.message.awakened {
    --color: var(--dark-color);
    letter-spacing: 0.2em;
    background-position: center left;
    background-size: cover, cover;
    box-shadow: 0px 0px 5px var(--neutral-color);
    border-color: var(--neutral-color);
    text-shadow: 2px 2px var(--neutral-color);
}

.message.awakened {
    background: var(--background);
    color: var(--color);
    background-position: center left;
    background-size: cover, auto;
}

.readout-log .awakened [definition], #dialogue-box .awakened [definition]:not(.reply), .awakened.message [definition] {
    border-bottom: 2px black dashed;
}

.dialogue-message.drowning .dialogue-text, 
.readout-log .message.drowning {
    text-shadow: 1px 1px var(--dark-color), 2px 2px var(--dark-color), 2px 2px var(--dark-color), 2px 2px var(--dark-color);
    letter-spacing: 0.25em;
    background: url(/img/textures/fadein.gif), url(/img/textures/corruripplegrayscale.gif);
    background-size: 150%, auto;
}

.dialogue-message.drowning_scared .dialogue-text, 
.readout-log .message.drowning_scared {
    letter-spacing: 0.5em;
}

.dialogue-message.drowning_panic .dialogue-text, 
.readout-log .message.drowning_panic {
    letter-spacing: 0.75em;
}

.dialogue-message.drowning_sourceless .dialogue-text, 
.readout-log .message.drowning_sourceless {
    text-align: center;
    background: var(--dark-color);
    color: var(--bright-color);
    text-transform: uppercase;
    letter-spacing: 0.125em;
    background: url(/img/textures/fadein.gif), url(/img/textures/corruripplegrayscale.gif);
    background-size: 100%, auto;
    filter: invert(1)
}

.dialogue-message.friend-color .dialogue-text, 
.readout-log .message.friend-color {
    --color: var(--friend-color);
    color: var(--friend-color);
    border-color: var(--friend-color)
}

.dialogue-message.obesk-color .dialogue-text, 
.readout-log .message.obesk-color {
    --color: var(--obesk-color);
    color: var(--obesk-color);
    border-color: var(--obesk-color)
}

.dialogue-message.rotwatcher .dialogue-text, 
.readout-log .message.rotwatcher {
    letter-spacing: 0;
    text-shadow: 0px 1px #0000006b;
    z-index: 1;
    color: black;
    background: white;
    text-align: left;
    line-height: 1.5em;
    text-transform: uppercase;
    border-bottom: 5px ridge var(--obesk-color);
}

.dialogue-message.rotwatcher .dialogue-text::after, 
.readout-log .message.rotwatcher::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.4;
    background: url(/img/textures/damagetran.gif), url(/img/textures/hazeflow.gif);
    background-size: 100% auto, auto;
    background-position: center;
}

/* special post-EP4 combat message layout. out here bc they are stored in readout log! */
.effect-message {
    z-index: 100;
    background: var(--dark-color);
    position: absolute;
    --border-size: 2px;
    max-width: 60vw;
    pointer-events: none;
}

.effect-message[team="ally"] {
    bottom: 30vh;
}

.effect-message[team="enemy"] {
    top: 30vh;
}

.effect-message .ally, .effect-message .good {
    color: var(--friend-color);
}

.effect-message .enemy, .effect-message .bad {
    color: var(--obesk-color);
}

.effect-message .neutral {
    color: var(--neutral-color);
}

.effect-message .action-main[definition] {
    border: unset;
    padding: unset;
    margin: unset;
}

.message-actions .action {
    position: relative;
}

.message-actions .subaction {
    padding: 0.5rem;
    border-left: var(--border-size) dashed var(--neutral-color);
    border-right: var(--border-size) dashed var(--neutral-color);
    font-size: 0.75em;
}

.message-actions .action:first-child {
    font-size: 2em;
    text-align: center;
    padding: 0.5rem;
    overflow: hidden;
}

.message-actions .action:first-child .action-hit:first-child {
    margin-left: unset;
}

.message-actions .action:first-child .action-hit.crit {
    color: var(--neutral-color);
}

.message-actions .action[besthit="crit"]:first-child {
    box-shadow: 0px 0px 10px var(--neutral-color);
    border: var(--border-size) solid var(--neutral-color);
}

.message-actions .action[besthit="crit"]:first-child::after {
    background-size: auto 350%;
    background-position: top;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.message-actions .subaction[besthit="crit"] {
    border-left: var(--border-size) solid var(--neutral-color);
    border-right: var(--border-size) solid var(--neutral-color);
}

.message-actions .subaction[besthit="crit"]::after,
.message-actions .subaction[besthit="crit"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    box-shadow: -5px 0px 10px var(--neutral-color);
}

.message-actions .subaction[besthit="crit"]::before {
    left: unset;
    right: 0;
    box-shadow: 5px 0px 10px var(--neutral-color);
}

.message-actions .action:first-child .action-hit {
    display: inline-block;
    margin: 0;
    font-size: 0.5em;
}

.message.combat-message .action:first-child .action-hit, .message-actions .action:first-child .action-hit:only-child  {
    font-size: 0.75em;
}

.action:first-child .action-hit.crit {
    color: var(--neutral-color);
}

.effect-message .action-hit.crit {
    text-shadow: 2px 2px 0px var(--dark-color), 4px 4px 0px var(--dark-color), 0px 0px 10px var(--neutral-color);
}

.message-actions .action[besthit="miss"] {
    border-left: 1px dotted var(--bright-color);
    border-right: 1px dotted var(--bright-color);
}

.message-actions .subaction:last-child {
    border-bottom: var(--border-size) solid var(--neutral-color);
}

.subaction[reason="attention"] {
    border: 3px var(--neutral-color) double;
    color: var(--neutral-color);
    text-align: center;
}

.effect-message .action-reason {
    color: var(--neutral-color);
}

.effect-message .action-hit {
    margin-left: 1em;
}

.action-hit::after, .action-hit::before {
    font-size: 1rem;
    margin: 0 0.5rem;
}

.action-hit.miss::before {
    content: "-";
}

.action-hit.hit::before {
    content: "*";
}

.action-hit.crit::before, .action-hit.crit::after {
    content: "!";
    color: var(--neutral-color);
}

.effect-message .action:first-child .action-hit::before, .effect-message .action:first-child .action-hit::after {
    display: none;
}

.effect-message .action:first-child .action-hit ~ .action-hit:before {
    content: "::";
    display: inline;
    margin: 0;
    color: inherit;
}

.effect-message .action-extra .action-hit {
    margin-left: 0;
}

.action-hit-count {
    font-size: 10px;
    margin-left: 0.5em;
}

.action-hit-count[count="0"], .action-hit-count[count="1"] {
    display: none;
}

.action-hit-count {
    color: var(--team-color);
}

.action-hit.crit .action-hit-count {
    color: var(--neutral-color);
}

.action-hit-count::before {
    content: "(x";
    text-transform: lowercase;
}

.action-hit-count::after {
    content: " hits)";
}

.action-hit.crit .action-hit-count::after {
    content: " crits)";
}  

#ms-0 + .subaction {
    border-top: 2px dashed var(--neutral-color);
}

.affected {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem 0;
    font-size: 0.75em;
}

.affected[team="ally"] {
    order: 2;
}

.affected .stat {
    margin-right: 0.5em;
    display: inline-flex;
}
.affected-name {
    margin-right: auto;
    margin-left: 0.5em;
}

.affected-name::after {
    content: "::";
    color: var(--bright-color);
}

.message-affected {
    position: relative;
    display: none;
    flex-direction: column;
    border: var(--border-size) dashed var(--bright-color);
    border-bottom: var(--border-size) solid var(--bright-color);
    border-top: unset;
    padding: 0.5em 0;
}

.message.combat-message {
    display: contents;
    line-height: unset;
    font-size: 1rem;
}

.message.combat-message .effect-message {
    position: relative;
    pointer-events: initial;
    bottom: unset;
    top: unset;
    text-transform: uppercase;
    margin-bottom: inherit;
}

.message.combat-message .action:first-child {
    font-size: 1rem;
    border: var(--border-size) solid;
}

.message.combat-message .message-actions .action[besthit="crit"]:first-child::after {
    animation: unset;
    background: linear-gradient(90deg, transparent 0%, var(--dark-color) 50%, transparent 100%), url(/img/textures/target.png);
    background-size: auto, auto 350%;
    width: 100%;
}

.message.combat-message .message-affected:not(:empty) {
    display: flex;
}

.message.combat-message h2 {
    display: none;
}

.message.combat-message .effect-message {
    --border-size: 1px;
}

/* "full-size" image readout - this might not get used in EP4 */
.readout-log .message.closerlook img {
    float: unset;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    display: block;
}

.readout-log .message.closerlook h2 {
    text-align: center;
    border-top: 1px solid;
    padding: 0.15em;
    margin: 0.5rem 0 0.5rem -2%;
    width: 104%;
}

/* IMAGE MODIFIERS - this sucks still  */
.menu .portrait-round img { border-radius: 100%; }
.menu .portrait-bright img, .portrait-bright .dialogue-portrait::after { background-color: var(--bright-color) }
.menu .portrait-dark img, .portrait-dark .dialogue-portrait::after { background-color: var(--dark-color) }
.menu .portrait-blocker img, .portrait-blocker .dialogue-portrait { background-image: url(/img/textures/blocker.gif)}
.menu .portrait-ripple img { background-image: url(/img/textures/corruripple.gif)}
.menu .portrait-darkripple img { background-image: url(/img/textures/corruripplegrayscale.gif)}
.menu .portrait-static img { background-image: url(/img/textures/static.gif)}
.menu .portrait-darkstatic img, .portrait-darkstatic .dialogue-portrait { background-image: url(/img/textures/badstatic.gif)}
.menu .portrait-fear img { background-image: url(/img/textures/fear.gif); background-size: cover;}
.menu .portrait-cover img { object-fit: cover }
.menu .portrait-contain img { object-fit: contain }
.menu .portrait-auto img, .portrait-auto .dialogue-portrait::after { object-fit: none; background-size: auto; }
.menu .portrait-top img { object-position: top }
.menu .portrait-topish img { object-position: 50% 20% }
.menu .portrait-center img, .portrait-center .dialogue-portrait::after { object-position: center; background-position: center; }
.menu .portrait-centertop img { object-position: center 35% }
.menu .portrait-bottom img { object-position: bottom }
.menu .portrait-centerlow img { object-position: center 65% }
.menu .portrait-bw img { filter: grayscale(1) contrast(2) }
.menu .portrait-haze img, .menu .portrait-haze .dialogue-portrait { background: url(/img/textures/memoryhaze.gif); background-size: cover; }
.menu .portrait-spectral img, .menu .portrait-spectral .dialogue-portrait {
    background: url(/img/textures/spotgradientinversetiny.gif);
    background-color: var(--bright-color);
    background-position: center;
    background-size: 120%;
}

.portrait-cover .dialogue-portrait::after { background-position: center; background-size: cover; }
.portrait-top .dialogue-portrait::after { background-position: top; }

@media only screen and (min-width: 2100px) { /* to avoid awkward cutoffs on big screens */
    .menu .portrait-auto img, .portrait-auto .dialogue-portrait::after { object-fit: cover; background-size: cover; }
}

/* TARGETS */
.target {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: url(/img/mui/marblynryetarget.svg);
    background-size: 100% 100%;
    z-index: 20;
    cursor: help;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#realgrid .target {
    backface-visibility: visible;
    transition: unset;
}

.target::after, #realgrid .target::before {
    content: "???";
    font-family: barcodetext;
    text-transform: uppercase;
    text-align: center;
    font-size: calc(1.25rem + 1vw);
    color: var(--neutral-color);
    background: var(--dark-color);
    backface-visibility: hidden;
    padding: 1.25rem;
    opacity: 0.25;
    transition: opacity 400ms ease-in-out;
}

#realgrid .target::after {
    transform: translateZ(1px);
}

#realgrid .target::before {
    transform: rotateY(180deg) translateZ(1px);
    position: absolute;
    transition: unset;
}

.target.targeted {
    background-color: #ffff0038;
}

.target.targeted::after, #realgrid .target.targeted::before {
    opacity: 1;
    content: attr(entity);
}

.target.always-targeted,
.target.always-targeted::after,
#realgrid .target.always-targeted::before,
.always-targeted .target,
.always-targeted .target::after,
.always-targeted #realgrid .target::before {
    opacity: 1;
    content: attr(entity) !important;
    white-space: nowrap;
}

.target.targeted[entaltname]::after,
#realgrid .target.targeted[entaltname]::before,
.always-targeted .target[entaltname]::after,
.always-targeted .target[entaltname]::before {
    content: attr(entaltname) !important;
}

.target.always-targeted,
.always-targeted .target {
    background-image: url(/img/mui/marblynryetarget_micro.svg);
}

.mui-prohibited .target, .in-dialogue .target, .in-menu .target {
    display: none !important;
}
  
/* MUI CONTEXT MENU */
#mindspike-scanner {
    position: fixed;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 18.75rem;
    height: 18.75rem;
    opacity: 0;
    border-radius: 100%;
    background: var(--dark-color);
    font-family: barcodetext;
    font-size: 2.25em;
    line-height: 1.5em;
    letter-spacing: -0.1em;
    transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.001);
    transform-origin: center;
    z-index: 100;
    padding-top: 7.5rem;
    padding-bottom: 3.2rem;
}

#mindspike-scanner.anim-in {
    transition: 40ms ease-in-out;
}

#mindspike-scanner.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: initial;
}

#mindspike-scanner::after {
    content: "";
    z-index: -1;
    animation: SPIN 10s linear infinite;
    width: 98%;
    height: 98%;
    border-radius: 100%;
    position: absolute;
    top: 1px;
    border: 2px dashed var(--neutral-color);
}

#mindspike-scanner span {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

#mindspike-entities {
    position: absolute;
    top: 1.75em;
    display: block;
    margin-bottom: 1em;
    width: 100%;
    white-space: nowrap;
    background: var(--neutral-color);
    color: var(--dark-color);
}

#mindspike-entities > span {
    width: 100%;
    display: inline-block;
    transform: translateX(calc(-100% * var(--index)));
    transition: transform 200ms ease-in-out;
}

#mindspike-entities > span::after {
    content: "__??";
}

#mindspike-entities > span::before {
    content: "??__";
}

#mindspike-entities:empty {
    text-decoration: none;
    text-align: center;
    margin-bottom: 0;
    background: var(--bright-color);
}

#mindspike-entities:empty::after {
    content: "..__NO_ENTITY__..";
}

#mindspike-entities > .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    padding-right: 0.1em;
    padding-bottom: 0.05em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: spacemono;
    cursor: pointer;
}

#mindspike-entities > .arrow:hover {
    background: var(--dark-color);
    color: var(--neutral-color);
    border-radius: 100%;
}

#mindspike-right {
    right: 0.5em;
    animation: MUIARROW 1s linear infinite;
    animation-play-state: paused;
}

#mindspike-left {
    left: 0.5em;
    animation: MUIARROW 1s linear infinite reverse;
    animation-play-state: paused;
}

#mindspike-scanner.active #mindspike-left, #mindspike-scanner.active #mindspike-right {
    animation-play-state: running;
}

@keyframes MUIARROW {
    000% {opacity: 0.0; transform: translate(-10%, -50%)}
    010% {opacity: 0.1; transform: translate(-8%, -50%)}
    090% {opacity: 1; transform: translate(8%, -50%)}
    100% {opacity: 0; transform: translate(10%, -50%)}
}

#mindspike-options {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
    min-height: 2em;
}

#mindspike-options > span {
    cursor: pointer;
}

#mindspike-options > span:hover {
    border: 1px solid;
    color: var(--neutral-color)
}

#mindspike-actions {
    display: none;
}

#mindspike-back {
    display: none;
    max-width: 50%;
    margin-right: auto;
}

#mindspike-scanner:not(.has-actions) #mindspike-act {
    display: none;
}

.acting #mindspike-back {
    display: block;
}

.acting #mindspike-act, .acting #mindspike-examine, #mindspike-scanner.acting .arrow {
    display: none;
}

.acting #mindspike-entities {
    margin-bottom: 0;
}

.acting #mindspike-actions {
    display: flex;
    flex-direction: column;
}

#act-options {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.act-option {
    display: inline-block;
    width: auto;
    margin: 0.32rem;
    padding: 0.63rem;
    background: var(--neutral-color);
    color: var(--dark-color);
    font-family: spacemono;
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1em;
    cursor: pointer;
}

.act-option:hover {
    background: var(--friend-color);
}

.act-option.act-ozo {
    background: url(/img/local/uncosm/ozo/ozospiral_text.png), var(--neutral-color);
    background-size: contain;
}

.act-option.closeout {
    pointer-events: none;
}

/* SPECIAL MINDSPIKE ENTITIES LISTINGS */
#mindspike-scanner span.loose-thought {
    font-family: barcode;
    line-height: 0.75em;
    padding-top: 0.25em;
    margin-bottom: -0.25em;
    text-decoration: none;
}

#mindspike-scanner span.loose-thought::before {
    content: unset;
}

#mindspike-scanner span.loose-thought::after {
    content: "..__INCOMPLETE_THOUGHTFORM__..";
    display: block;
    font-family: spacemono;
    letter-spacing: 0;
    font-size: 0.63rem;
    margin-top: -0.5em;
}
  
/* MUI Activation */
.mui-active #content {
    transform: translateX(calc(var(--contentDialogueOffset) * -1));
}

.mui-active #readout {
    transform: translateX(0%);
}

.mui-active #meta-icon:after {
    background-image: url(/img/mui/mindspikelogoactive.gif);
    animation-play-state: running;    
}

.mui-active .target, .freemove .target, body:not(.mui-active) .target:hover {
    opacity: 1;
}

body:not(.mui-active) .target::after, body:not(.mui-active) #realgrid .target::before {
    content:"RIGHT CLICK";
}

body:not(.mui-active) .target[lowvis] {
    opacity: 0 !important;
}

/* chatter */
.chatter-container, .gridpiece .chatter-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    height: 0;
    flex-direction: column;
    pointer-events: none;
}

.chatter {
    width: auto;
    white-space: nowrap;
    background: var(--dark-color);
    padding: 10px;
    margin-top: 10px;
    font-size: 0.65rem;
    font-family: spacemono;
}

.chatter span {
    display: inline-block;
    text-align: center;
    min-width: 0.75em;
}  

/* definition box */
#definition-box {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 45vw;
    z-index: 10000;
    transform: 
        translate(
            calc(  (var(--x) * 1px)   +   ((var(--xFlip) * (100% + 2em)) + 1em)  ), 
            calc(  (var(--y) * 1px)   +   ((var(--yFlip) * (100% + 2em)) + 1em)  )
        );
    pointer-events: none;
    transition: opacity 400ms ease-in-out, transform 50ms linear;
    background: var(--dark-color);
    color: var(--bright-color);
    padding: 0.63rem;
    font-family: spacemono;
    font-size: 0.75rem;
    border: 1px dashed;
    line-height: 1.2em;
}

#definition-box.slow {
    transition: opacity 400ms ease-in-out, transform 250ms linear;
}

#definition-box:not(.active) {
    opacity: 0;
}

#definition-box[for="regular"] {
    white-space: pre-line;
}

#definition-box[for="action"] {
    padding: 0.75em;
    color: var(--neutral-color);
}

#definition-box[for="tile"] {
    opacity: 0;
    background: #000000d1; /* cheating but the UI being nice is imore important */
    padding: 0;
    border: unset;
}

.mui-active #definition-box[for="tile"].active {
    opacity: 1;
}

#definition-box[for="status"] {
    padding: 0;
    border: unset;
}

#definition-box[for=status] .actiondef-statuses {
    margin-top: 0;
    line-height: 1.5em;
}

.readout-log [definition], #dialogue-box [definition]:not(.reply), .message [definition], #party-menu [definition], .sysinfo [definition], #system-menu [definition].definition {
    display: inline-block;
    border-bottom: 1px dashed var(--color, var(--bright-color));
    padding-bottom: 2px;
    margin-bottom: -2px;
    cursor: alias;
}

.readout-log .code[definition] {
    border-bottom: 2px dashed;
}

#dialogue-box .dialogue-message.mindspike [definition] {
    border-bottom-color: black;
}

.actiondef {
    max-width: 500px;
}

.actiondef div:empty, .actiondef span:empty {
    display: none;
}

.actiondef-heading {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--neutral-color);
    padding-bottom: 0.5em;
    margin-bottom: 0.75em;
    min-height: 4em;
}

.actiondef-stats {
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-left: 1em;
    color: var(--bright-color);
    text-transform: uppercase;
}

.actiondef-stats .actiondef-stat:before {
    content: attr(info) "::";
    color: var(--neutral-color);
    text-transform: uppercase;
}

.actiondef-heading h5 {
    font-family: 'barcodetext';
    text-transform: uppercase;
    font-size: 3em;
    line-height: 1em;
}

.actiondef-effect h6 {
    position: absolute;
    background: black;
    padding: 0.25em;
    transform: translate(25%, -105%);
    line-height: 1em;
}

.actiondef-effect > span {
    color: var(--bright-color);
    display: block;
}

.actiondef-onhit::before, 
.actiondef-oncrit::before,
.actiondef-onuse::before {
    content: "HIT::";
    color: var(--neutral-color);
}
.actiondef-oncrit::before { content: "CRIT::" }
.actiondef-onuse::before { content: "USE::" }

.actiondef-conditional {
    width: 100%;
    white-space: pre-line;
}

.actiondef-conditional em {
    font-style: initial;
    text-transform: uppercase;
    color: var(--friend-color);
}

.actiondef-effect .actiondef-flavor {
    font-style: italic;
    font-size: 10px;
    margin-bottom: 0.5em;
    color: var(--neutral-color);
}

.actiondef-effect .status {
    text-transform: uppercase;
}

.actiondef-statuses {
    margin-top: 0.5em;
    text-transform: uppercase;
}

.actiondef-status {
    --status-color: var(--obesk-color);
    border: 1px solid var(--status-color);
    padding: 0.5em;
}

.actiondef-status.beneficial {
    --status-color: var(--friend-color);
}

.actiondef-status.infodisplay {
    --status-color: var(--neutral-color);
}

.actiondef-status ~ .actiondef-status {
    margin-top: 0.5em;
}

.actiondef-status h6,
.actiondef-status span,
.actiondef-status img {
    display: inline;
    color: var(--bright-color);
}

.actiondef-status h6 {
    text-transform: uppercase;
    color: var(--status-color);
}

.actiondef-status-icon {
    display: inline;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: inherit;
    margin: -0.3em 0;
}

.status-removes .actiondef-status-icon {
    border: 1px solid currentColor;
    margin-right: 0.25em;
}

.actiondef-status span {
    white-space: pre-line;
}

.actiondef-status.passive::after {
    content: "PASSIVE";
    font-size: 0.75em;
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--status-color);
    transform: translateY(100%);
    background: var(--dark-color);
    border: inherit;
    border-top: unset;
    padding: 0 0.25em;
}

.actiondef-status.impulse {
    border-color: var(--bastard-color);
}

.actiondef-status.impulse::after {
    content: "IMPULSE";
    font-family: "bastard";
    font-size: 3em;
    top: 0;
    right: 0;
    bottom: unset;
    background: black;
    padding: 0.1em;
    transform: translate(50%, -50%) rotate(25deg);
    color: var(--bastard-color)
}

.actiondef-origin {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5em;
    font-size: 0.8em;
}

.actiondef-origin span {
    display: flex;
    font-style: italic;
}

.actiondef-origin .actiondef-tile-length {
    font-size: 1.5em;
    font-weight: 800;
    font-style: unset;
}  

.tiledef .actiondef-statuses {
    margin-top: unset;
}


/* LOOSE THOUGHTS - FLOATING TEXT */
#content .loose-thought {
    font-family: beech;
    display: block;
    font-size: calc(1em + 1vw);
    padding: 0 1em;
    text-align: center;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
}

#content .loose-thought span {
    animation: HOVER 1s ease-in-out infinite alternate;
    min-width: 1em;
    text-align: center;
    display: inline-block;
}

/* COMMON CORRU ELEMENTS */
.code {
    display: inline-block;
    padding: 2.5px 5px;
    background: url(/img/textures/corrurippletran.gif), white !important;
    background-position: center !important;
    color: var(--dark-color) !important;
    border: 1px solid var(--neutral-color) !important;
    margin: 2.5px;
}

.portal {
    position: absolute;
    z-index: 1;
}

.portal figure {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: var(--portalImg);
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal figure::after {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    pointer-events: none;
    background-image: url(/img/sprites/misc/sphereframe.gif);
    background-size: contain;
    background-position: center;
    animation: SHAKE 15S ease-in-out INFINITE alternate;
}

.buddy {
    --buddyimg: url(/img/sprites/funfriend/funfriend.gif);
    --offsetX: 50vw;
    --offsetY: 50vh;
    --size: 75px;
    --speed: 1000ms;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    transform-origin: center;
    transform: translate(-50%, -50%) translate(calc(var(--offsetX) * 1px), calc(var(--offsetY) * 1px)); 
    transition: transform var(--speed) ease-in-out;
    z-index: 10;
}

.buddy.instant {
    transition: none;
}

.buddy:not(.custombuddy) figure {
    width: 100%;
    height: 100%;
    animation: BUDDYBOUNCE-Y 1s ease-in-out infinite alternate
}

.buddy:not(.custombuddy) figure::after {
    content: "";
    background-image: var(--buddyimg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    animation: BUDDYBOUNCE-X 2s ease-in-out infinite alternate;
    transform-origin: bottom;
}

.buddy .target {
    background-size: auto;
}

.buddy .target::after {
    font-size: 20px;
    background: #0000007a;
}

.buddy.hidden {
    opacity: 0;
}

.buddy#thesmiler {
    z-index: 100;
    opacity: 0.4;
    transition: opacity 2s ease-in-out;
}

.buddy#thesmiler figure, .buddy#thesmiler figure::after {
    animation: unset;
}

.buddy#thesmiler.fadeaway {
    pointer-events: none;
    opacity: 0;
}

@keyframes BUDDYBOUNCE-Y {
    0% { transform: translateY(5%) rotateY(20deg)}
    100% { transform: translateY(-5%) rotateY(-20deg)}
}

@keyframes BUDDYBOUNCE-X {
    0% { transform: translateX(5%) rotate(5deg) }
    100% { transform: translateX(-5%) rotate(-5deg) }
}

/* FUNFRIEND REPAIRS */
.repairpatch-drift, .repairpatch {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.repairpatch-drift {
    display: none;
    top: 0;
    left: 20vh;
    animation: PATCHDRIFT 120s ease-in-out infinite;
}

.repairpatch-drift.active {
    display: flex;
}

.repairpatch {
    width: 50vmin;
    height: 40vmin;
    border-radius: 60%;
    overflow: hidden;
    clip-path: polygon(5.75% 4.5%, 42.88% 8.26%, 80% 4.5%, 98.02% 13.52%, 87.57% 45.93%, 94.61% 67.06%, 92.88% 94.25%, 72% 94.25%, 58.94% 84.63%, 28.03% 90.62%, 5.75% 84.63%, 1.89% 42.58%);
}

.repairpatch::after, .repairpatch::before {
    content: "";
    position: absolute;
    width: 125%;
    height: 125%;
    background: url(/img/textures/corrurippletran.gif), url(/img/textures/badstatic.gif);
    background-position: center;
}
.repairpatch::after { background: url(/img/textures/cneural.gif); background-size: 50% }

body:not([quality="low"]) .repairpatch-drift {filter: drop-shadow(-3px -1px 0px var(--obesk-color)) drop-shadow(5px 5px 0px var(--friend-color));}
body:not([quality="low"]) .repairpatch { animation: PATCHWAVER 20s ease-in-out infinite alternate; }
body:not([quality="low"]) .repairpatch::before {animation: SPIN 120s linear infinite}

@keyframes PATCHWAVER {
    100%, 0% {clip-path: polygon(0% 0%, 32.5% 0%, 68% 0%, 100% 0%, 100% 25%, 100% 62.75%, 100% 100%, 72.75% 100%, 35.5% 100%, 0% 100%, 0% 64.25%, 0% 28.25%);}
    33% { clip-path: polygon(0% 0%, 66.5% 0%, 44.5% 20.47%, 100% 0%, 100% 67.25%, 81.51% 83.63%, 100% 100%, 44.5% 100%, 41.46% 79.07%, 0% 100%, 0% 64.25%, 23.37% 32.13%);}
    66% { clip-path: polygon(3.5% 83.99%, 0% 0%, 40.75% 32.13%, 54% 8%, 100% 0%, 100% 18.88%, 81.5% 64.25%, 100% 100%, 75.96% 100%, 50% 82.13%, 28.06% 62.61%, 18.5% 100%);}
}

@keyframes PATCHDRIFT {
    100%, 0% {transform: translate(0) rotate(0deg)}
    25% {transform: translate(20vw, -20vh) rotate(10deg)}
    50% {transform: translate(40vw, 10vh) rotate(-10deg)}
    75% {transform: translate(20vw, 20vh) rotate(5deg)}
}


@keyframes PROXYBOUNCE-X {
    0% {transform: translateX(5%) rotateY(50deg)}
    100% {transform: translateX(-5%) rotateY(-50deg)}
}

@keyframes PROXYBOUNCE-Y {
    0% {transform: translateY(5%) rotate(20deg)}
    100% {transform: translateY(-5%) rotate(-20deg)}
}

.ffproxy.buddy figure {
    animation: PROXYBOUNCE-Y 5s ease-in-out infinite alternate;
}

.ffproxy.buddy figure::after {
    animation: PROXYBOUNCE-X 4s ease-in-out infinite alternate;
}

.ffproxy.buddy .chatter-container {
    text-transform: uppercase;
}

/* EPISODE CONTROL */
#advance-notice {
    position: fixed;
    top: 2vmin;
    left: 150px;
    z-index: 26;
    width: 20vmin;
    height: 5vmin;
    transition: transform 1s ease-in-out;
}

#advance-notice, 
.in-dialogue #advance-notice, 
.in-combat #advance-notice,
body[state="corru-loaded"] #advance-notice,
body[page="corru-observer"]:not(.sitting) #advance-notice {
    display: none;
}

#advance-notice.active {
    display: block;
}

#advance-notice .target::after {
    font-size: calc(1rem + 0.5vw);
    padding: 0.25rem 1.25rem;
}

/* OBJECTIVES */
#objectives {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    z-index: 19;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    background: black;
    color: var(--neutral-color);
    border: 1px solid;
    font-size: 0.75rem;
    transition: all 1s ease-in-out, transform 2s ease-in-out;
    transform: translateY(calc(-100% - 1rem));
    opacity: 1;
}

#objectives::before {
    content: "!!__OBJECTIVES__!!";
    display: block;
    text-align: center;
    font-family: barcodetext;
    font-size: 2.5em;
    margin-bottom: 1rem;
}

.in-menu #objectives {
    transform: translateY(-150%);
    opacity: 0;
}

#objectives.active {
    transform: unset;
}

.objective::before {
    content: "";
    display: inline-block;
    text-align: center;
    width: 1em;
    height: 1em;
    background: white;
    border: 1px solid;
    margin-right: 1em;
}

.objective {
    padding: 0.25em 0;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    max-height: 4rem;
    cursor: help;
}

.objective > span {
    border-bottom: 1px dotted var(--bright-color);
}

.objective span, .objective::before {
    pointer-events: none;
}

.objective, .objective .progress {
    transition: all 1s ease-in-out;
}

.objective.completed {
    color: var(--friend-color);
    text-decoration: line-through;
}

.objective.completed::before {
    content: "X";
    color: black;
}

.objective.hide, .objective.completed .progress {
    max-height: 0.001px;
    overflow: hidden;
    padding: 0;
    transform: scaleY(0.001);
}

.objective .progress {
    display: block;
    margin-left: 0.5em;
    font-size: 0.75em;
}
  

#objectives .toggle {
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5em;
    left: 0;
    transform: translateY(100%);
    background: var(--dark-color);
    color: var(--neutral-color);
    cursor: pointer;
    border: 1px solid var(--neutral-color);
    transition: all 1s ease-in-out;
}

#objectives .toggle::before {
    content: "TOGGLE OBJECTIVES";
}

#objectives.active .toggle {
    background: var(--neutral-color);
    color: var(--dark-color);
}
  

/* SIZE ADJUSTMENTS */
.codezone.in-dialogue #dialogue-box, :root.bigmode .codezone.in-dialogue #dialogue-box {
    transform: unset;
    left: 0;
    right: 0;
    margin: auto;
    width: 40vw;
    box-shadow: 0px 0px 50px black;
    border: solid 5px black;
}

:root.bigmode { --contentDialogueOffset: -17.5vw }
:root.bigmode #readout { width: 30%; }
:root.bigmode #dialogue-box { width: 35vw; }

@media only screen and (max-width: 1366px) {
    #readout { width: 33%; }
    #dialogue-box { width: 40%; }
    :root { --contentDialogueOffset: -20vw }

    :root.bigmode { --contentDialogueOffset: -25vw }
    :root.bigmode #readout { width: 40%; }
    :root.bigmode #dialogue-box, :root.bigmode .codezone.in-dialogue #dialogue-box { width: 50%; }
    :root.bigmode #definition-box { max-width: 50vw; }

    :root.bigmode #system-menu {
        width: 60vw;
        transform: translateX(60vw)
    }

    .message.examine, .message.sys {
        line-height: 1.25em !important;
    }

    .message.loose-thought h2 {
        max-width: 50% !important;
    }

    .readout-log [definition], #dialogue-box [definition], .message [definition] {
        margin-bottom: 2px;
    }

    :root.bigmode .in-dialogue .vn-wrapper {
        transform: scale(0.75);
    }
}

/* SIZE ADJUSTMENTS */
@media only screen and (max-width: 1366px) {
    :root {
        --bigFont: 18px;
    } 
}

@media only screen and (max-width: 1200px) {
    :root {
        --bigFont: 18px;
        --regularFont: 14px;
    } 
}

@media only screen and (max-width: 1000px), screen and (max-height: 700px) {
    :root {
        --bigFont: 16px;
        --regularFont: 12px;
    }    
}

/* GPU MENU */
.popup-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000000;
    background: #000000bd;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.popup-warning .sysblock {
    max-width: 800px;
    text-align: center;
    background: black;
}

.popup-warning .sysbox p,
.popup-warning .sysbox h3,
.popup-warning .sysbox div,
.popup-warning .sysbox span {
    margin-bottom: 1rem;
}

.popup-warning .sysbox span {
    font-size: 1rem;
}

.popup-warning .sysbox h3 {
    font-family: barcodetext;
    font-size: 3em;
}

.popup-warning .sysbox .button {
    font-size: 2rem;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
}

/* MASK MENU */
#masks {
    animation: PATCHWAVER 10s ease-in-out infinite;
    animation-play-state: paused;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(100%, 100%);
    pointer-events: none;
}

.ozo-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--obesk-color);
    text-shadow: unset;
    text-transform: uppercase;
    transform: rotate(360deg);
    opacity: 0;
    transition: 400ms ease-in-out;
    transition-delay: var(--maskDelay);
    cursor: pointer;
    
    /* this makes the text still be "on-page" - felt weird to leave the element empty without a label */
    font-size: 0.00001px;
    line-height: -1em;
}

.ozo-mask::before {
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    background-image: var(--maskImage);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    border: 1px solid var(--neutral-color);
}

.ozo-mask.active::before {
    border-color: var(--friend-color);
}

.ozo-mask.active::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 100%;
    z-index: -1;
    background: url(/img/textures/ccontours.gif);
    pointer-events: none;
}

.ozo-mask.ozo-multi-mask.active::after {
    background-image: url(/img/textures/yneural.gif);
	background-color: black;
	background-size: 150%;
}

.ozo-mask-grid {
    display: flex;
    flex-direction: row;
    transition: all 400ms cubic-bezier(1,-0.35,.58,1);
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0.5em;
    gap: 0.25em;
    width: 120px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    pointer-events: initial;
    cursor: initial;
    clip-path: circle(0 at top left);
    transition: clip-path 1s ease-in-out;
}

.ozo-mask-grid::after, .ozo-mask-grid::before {
    content: "";
    position: absolute;
    height: 125%;
    width: 125%;
    border-radius: 100%;
    animation-duration: 40s;
    background: url(/img/local/uncosm/ozo/ozospiral_text.png);
    background-position: center;
    background-size: cover;
    z-index: -1;
}

.ozo-mask-grid::before {
    animation: SPIN 20s linear infinite;
    background-image: url(/img/textures/memoryhaze2.gif);
}

body[menu="masks"].in-tiny-menu #masks {
    animation-play-state: running;
    pointer-events: initial;
}

body[menu="masks"].in-tiny-menu .ozo-mask-grid {
    clip-path: circle(200% at top left)
}

body[menu="masks"].in-tiny-menu .ozo-mask {
    transform: rotate(0deg);
    opacity: 1;
}

.ozo-mask-reality::before {
    background-size: 250%;
    background-position: 25% 41%;
}

/* ,¬½?¨¬°G,¬“A¬¶G,¬“¬¬µG,¬“W¬¥G,¬´G-¬ÕG,¬½?¦¬¶G,¬½?¾¬ */
.mindsci-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1em;
    padding: 0.5em 0.2em 0.1em;
    cursor: help;
    font-family: barcode;
    background: var(--neutral-color);
    color: black;
    border: 1px solid;
    border-color: transparent;
    animation-play-state: paused;
}

.mindsci-status::after {
    content: attr(status);
}

.mindsci-status::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(/img/fav.gif);
    background-size: contain;
    --baseTransform: translateX(-125%) translateY(-50%);
    border: 1px solid;
    border-radius: 100%;
    border-color: inherit;
    transform: var(--baseTransform);
    pointer-events: none;
}

body[menu="system"].in-menu .mindsci-status::before {
    animation: SPIN-Y 5s linear infinite;
}

.mindsci-status[code="2"] {
    border-color: var(--bright-color) !important;
    background: url(/img/textures/static.gif) !important;
    color: var(--dark-color) !important;
}

body[menu="system"].in-menu .mindsci-status[code="2"]::before {
    animation: unset;
}

.mindsci-status[code="1"] {
    border-color: var(--friend-color) !important;
    background: var(--friend-color) !important;
    color: var(--dark-color) !important;
}

body[menu="system"].in-menu .mindsci-status[code="1"]::before {
    animation: SPIN-Y 30s ease-in-out infinite;
}

.mindsci-status[code="-1"] {
    border-color: var(--obesk-color) !important;
    background: var(--obesk-color) !important;
    color: var(--bright-color) !important;
}

body[menu="system"].in-menu .mindsci-status[code="-1"]::before {
    animation: SHAKE 10ms linear infinite;
}

.mindsci-status[code="-2"] {
    border-color: var(--obesk-color) !important;
    background: url(/img/textures/mspinnel.gif) !important;
    color: var(--bright-color) !important;
}

body[menu="system"].in-menu .mindsci-status[code="-2"]::before {
    animation: BIGSHAKE 10ms linear infinite;
}

/* browser-specific bad practice zone */
body.chromium > .menu {
    opacity: 0.99; /* seems to solve flickering from menu movement */
}

/* VFX SECTION - overlays (kinda like flash but more generic) used with the vfx command */
.vfx {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vfx::after, .vfx::before {
    width: 100%;
    height: 100%;
    position: absolute;
}

#skip-vfx {
    background: var(--dark-color);
    z-index: 100000;
    display: none;
}

#skip-vfx::before {
    content: "EXECUTING::'segment advance'";
    width: auto;
    height: auto;
    color: var(--neutral-color);
    border: 1px solid;
    padding: 0.25em;
    font-size: 3rem;
    font-family: barcodetext;
    background: var(--dark-color);
}


#skip-vfx::after {
    content: "PERHAPS HE IS RIGHT - PERHAPS IT IS THE MOMENTS OF PEACE THAT ARE TRULY ONLY A DREAM... THESE MOMENTS FADE SO QUICKLY, DISAPPEARING LIKE AN EYELESS FOG IN THE FACE OF WHAT VELZIE FORCES US TO ENDURE ON ITS TWISTED STAGE";
    width: auto;
    height: auto;
    font-family: barcode;
    font-size: 5em;
    white-space: nowrap;
    left: 0;
    animation: SKIPSCAN 2s linear infinite;
    transform-origin: 20% 25%;
    z-index: -1;
    color: var(--friend-color);
}

@keyframes SKIPSCAN {
    0% {
        transform: translate(0%, 20%)
    }

    100% {
        transform: translate(-50%, 20%)
    }
}

#skip-vfx.active {
    display: flex;
}

.in-menu #beacon-vfx, .in-dialogue #beacon-vfx {
    transform: translateX(var(--contentDialogueOffset));
}

#beacon-vfx {
    transition: opacity 700ms ease-in-out, transform 1s;
    opacity: 0;
}

#beacon-vfx.active {
    opacity: 0.5;
}

.mui-active #beacon-vfx {
    transform: translateX(calc(var(--contentDialogueOffset) * -1));
}

#beacon-vfx::before, #beacon-vfx::after {
    content: "";
    background: url(/img/local/uncosm/ozo/ozospiral.gif);
    background-position: center;
    background-size: cover;
    animation: SPIN 60s linear infinite;
    width: 125vmax;
    height: 125vmax;
    border-radius: 100%;
}

#beacon-vfx::after {
    animation-duration: 120s;
}

#beacon-vfx.okidoia::before, #beacon-vfx.okidoia::after {
    content: "";
    background: url(/img/textures/wiggly.gif);
    background-position: center;
    background-size: cover;
    animation: SPIN 60s linear infinite;
    width: 100vmax;
    height: 100vmax;
    border-radius: 100%;
}

#beacon-vfx.okidoia::after {
    background: url(/img/textures/wiggly2.gif);
    background-position: center;
    background-size: cover;
}

#beacon-vfx.flowerwarp {
    width: 150vw;
    height: 150vw;
    top: unset;
    left: unset;
}

#beacon-vfx.flowerwarp.active {
    opacity: 1;
}

#beacon-vfx.flowerwarp::before, #beacon-vfx.flowerwarp::after {
    content: "";
    background: url(/img/local/joy/flowerwarp.gif);
    background-position: center;
    background-size: auto;
    animation: SPIN 60s linear infinite;
    width: inherit;
    height: inherit;
    border-radius: 100%;
}

#beacon-vfx.flowerwarp::after {
    background: url(/img/textures/memoryhaze2.gif);
    animation: SPIN 30s linear infinite;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 500px;
    z-index: -1;
}

#beacon-vfx.flowerwarp.yucky::before {
    background-image: url(/img/local/joy/flowerwarpyucky.gif)
}

#beacon-vfx.flowerwarp.yucky::after {
    display: none;
}

/* VN - stored globally due to enough usage in multiple places */
#vn {
    display: flex;
    position: fixed;
    align-items: flex-end;
    top: 0;
    width: 100%;
    justify-content: center;
    transition: opacity 1s ease-in-out;
    --effectiveChars: max(var(--activeChars), 1);
    pointer-events: none;
}

.swapcam .vn-party {
    display: none;
    pointer-events: none;
}

#vn.fade {
    opacity: 0;
}

#vn::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/textures/fadeinlong.gif), linear-gradient(0deg, rgba(255, 0, 255, 0.63) 0%, rgb(0, 0, 0) 100%);
    background-size: 100% auto;
    transform: rotate(180deg);
    transition: opacity 2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: -5;
}

#vn.bg::after {
    opacity: 1;
}  

#vn.fade-chars .vn-wrapper {
    opacity: 0 !important;
}

.cull-stage.in-combat #vn {
    display: none;
}

.vn-wrapper {
    display: flex;
    justify-content: center;
    transition: opacity 1.5s ease-in-out, max-width 1.5s ease-in-out;
    width: 100%;
    pointer-events: none;
    flex-grow: 1;
    flex-shrink: 1;
}

.vn-wrapper, .vn-wrapper.vn-wait {
    opacity: 0;
    max-width: 0vw;
}

.vn-wrapper.hiding {
    max-width: 0vw !important;
}

.vn-wrapper.active {
    pointer-events: initial;
    opacity: 1;
    max-width: calc(70vw / var(--effectiveChars));
}

.vn-wrapper.party {
    max-width: 0vw !important;
}

.vn-wrapper.vn-absolute, .vn-wrapper[pos*="absolute"] {
    position: absolute;
    z-index: -2;
    top: 0;
}

.vn-char {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100vmin;
    z-index: 5;
    --charTransform: translateX(0); /* set at character level */
    --baseTransform: translateX(0); /* set by [pos] */
    transform: var(--charTransform) var(--baseTransform);
    transform-origin: bottom;
    transition: transform 1s ease-in-out;
}

.vn-wrapper.phasing .vn-char {
    transition: unset !important;
}

.vn-char > div, .vn-char > div:before {
    height: 100%;
    width: 100vmin;
    pointer-events: none;
    position: absolute;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    --baseTransform: translateX(0);
    transform: var(--baseTransform);
    top: 0;
    left: 0;
}

.vn-wrapper:not(.vn-party) .vn-char > div:first-child {
    position: relative;
}

.vn-wrapper:not(.vn-party) .vn-char > div ~ div {
    left: unset; 
}

.vn-char .target {
    width: 45vmin;
    height: 100vh;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10%);
}  

.vn-qou {
    top: 0;
    height: 200vmin;
}

.vn-qou div, 
.vn-qou div::after {
    background-size: auto 100%;
}

.vn-qou .target {
    background-size: 100% 100%;
}

/* VN - qou vn */
/* gakvu has a hardcoded no-connector for collapse part 1 */
.vn-char#gakvu .head, body[currentdialogue="d3_movefriend_finish"] .vn-char#gakvu .head { background-image: url(/img/sprites/obesk/gakvu/full/gakvu_face.gif), url(/img/sprites/obesk/gakvu/full/gakvu_head.gif); }
.vn-char#gakvu .body { background-image: var(--gakvuCoatFull), url(/img/sprites/obesk/gakvu/full/gakvu_legs.gif); }
.vn-wrapper.vn-con #gakvu .head { background-image: url(/img/sprites/obesk/gakvu/full/connector.gif), url(/img/sprites/obesk/gakvu/full/gakvu_face.gif), url(/img/sprites/obesk/gakvu/full/gakvu_head.gif); }
#content[embassyday="1"] .vn-char#gakvu .head { background-image: url(/img/sprites/obesk/gakvu/full/connectoralt.gif), url(/img/sprites/obesk/gakvu/full/gakvu_face.gif), url(/img/sprites/obesk/gakvu/full/gakvu_head.gif); }

.vn-char#tozik {
    height: 180vmin;
}
.vn-char#tozik .head { background-image: url(/img/sprites/obesk/tozik/full/tozik_eyes.gif), url(/img/sprites/obesk/tozik/full/tozik_head.gif), url(/img/sprites/obesk/tozik/full/tozik_headcore.gif); }
.vn-char#tozik .body { background-image: url(/img/sprites/obesk/tozik/full/tozik_body.gif); }
.vn-char#tozik .body::before {
    background-image: url(/img/sprites/obesk/tozik/full/tozik_arms.gif);
    background-size: inherit;
    content: "";
    animation: TINYHOVER 10s EASE-IN-OUT infinite alternate;
}
.vn-wrapper.vn-con #tozik .head { background-image: url(/img/sprites/obesk/tozik/full/connector.gif), url(/img/sprites/obesk/tozik/full/tozik_eyes.gif), url(/img/sprites/obesk/tozik/full/tozik_head.gif), url(/img/sprites/obesk/tozik/full/tozik_headcore.gif); }
#content[embassyday="1"] .vn-char#tozik .head { background-image: url(/img/sprites/obesk/tozik/full/connectoralt.gif), url(/img/sprites/obesk/tozik/full/tozik_eyes.gif), url(/img/sprites/obesk/tozik/full/tozik_head.gif), url(/img/sprites/obesk/tozik/full/tozik_headcore.gif); }

.vn-wrapper .vn-char#tozik.tozpain .head {
    background-image: url(/img/sprites/obesk/tozik/full/tozik_eyes_pain2.gif), url(/img/sprites/obesk/tozik/full/tozik_head.gif), url(/img/sprites/obesk/tozik/full/tozik_headcore_pain.gif);
}

.vn-wrapper .vn-char#tozik.tozpain .head::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 130%;
    background: url(/img/sprites/obesk/tozik/full/tozik_haunt.gif);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    bottom: 0;
    z-index: -1;
}

.vn-char#miltza {
    --charTransform: translateY(-7.5%);
    height: 220vmin;
}
#miltza.vn-char .head { background-image: url(/img/sprites/obesk/miltza/full/face.gif), url(/img/sprites/obesk/miltza/full/head.gif);}
#miltza.vn-char .body { background-image: url(/img/sprites/obesk/miltza/full/torso.gif), url(/img/sprites/obesk/miltza/full/legs.gif) }
#miltza.vn-char .arms { background-image: url(/img/sprites/obesk/miltza/full/arms.gif);}
    #miltza.vn-char .arms::after { 
        background-image: url(/img/sprites/obesk/miltza/full/okizika_arm.gif);
        width: 100%;
        height: 100%;
        display: block;
        background-size: inherit;
        background-repeat: no-repeat;
        background-position: center;
    }
.vn-wrapper.vn-con #miltza .head, body[currentdialogue="d3_movefriend_finish"] .vn-wrapper #miltza .head { background-image: url(/img/sprites/obesk/miltza/full/connector.gif), url(/img/sprites/obesk/miltza/full/face.gif), url(/img/sprites/obesk/miltza/full/head.gif); }


#cavik.vn-char .head { background-image: url(/img/sprites/obesk/cavik/full/cavikhair.gif); }
    #cavik.vn-char .head::before { content: ""; background-image: url(/img/sprites/obesk/cavik/full/cavikmask.gif); }
    .vn-wrapper.vn-con #cavik .head::before { background-image: url(/img/sprites/obesk/cavik/full/connector.gif), url(/img/sprites/obesk/cavik/full/cavikmask.gif);}
#cavik.vn-char .body { background-image: url(/img/sprites/obesk/cavik/full/cavikponcho.gif); }
#cavik.vn-char .arms { background-image: url(/img/sprites/obesk/cavik/full/cavikhands.gif); }
#cavik.vn-char .legs { background-image: url(/img/sprites/obesk/cavik/full/cavikboots.gif); z-index: -1; }
    #cavik.vn-char .legs::before { content: ""; background-image: url(/img/sprites/obesk/cavik/full/cavikabdomen.gif); }

#bozko.vn-char { height: 150vmin }
#bozko.vn-char .head { background-image: url(/img/sprites/obesk/bozko/full/bozkohead.gif);}
    .vn-wrapper.vn-con #bozko .head { background-image: url(/img/sprites/obesk/bozko/full/connector.gif), url(/img/sprites/obesk/bozko/full/bozkohead.gif)}
#bozko.vn-char .body { background-image: url(/img/sprites/obesk/bozko/full/bozkobody.gif);}
#bozko.vn-char .arms { background-image: url(/img/sprites/obesk/bozko/full/bozkoarms.gif);}
    #bozko.vn-char .arms::before { background-image: url(/img/sprites/obesk/bozko/full/bozkofingers.gif); content: ""; background-position: bottom;}

#kazki.vn-char { --charTransform: translateY(-5%) }
#kazki.vn-char .head { background-image: url(/img/sprites/obesk/kazki/full/kazkihead.gif), url(/img/sprites/obesk/kazki/full/kazkihair.gif)}
    .vn-wrapper.vn-con #kazki .head,
    #content[embassyday="2"] .vn-char#kazki .head { background-image: url(/img/sprites/obesk/kazki/full/connector.gif), url(/img/sprites/obesk/kazki/full/kazkihead.gif), url(/img/sprites/obesk/kazki/full/kazkihair.gif); }
#kazki.vn-char .body { background-image: url(/img/sprites/obesk/kazki/full/kazkiarms.gif), url(/img/sprites/obesk/kazki/full/kazkishawl.gif)}
#kazki.vn-char .legs { background-image: url(/img/sprites/obesk/kazki/full/kazkiorb.gif), url(/img/sprites/obesk/kazki/full/kazkilegs.gif)}

.vn-wrapper[pos*="tallmode"] #kazki.vn-char {
    --charTransform: translateY(-15%);
}

/* VN - mindcores */
.vn-char.vn-mindcore {
    background-image: var(--mindcoreImg);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    width: 55vmin;
}

#itzil.vn-char { --mindcoreImg: url(/img/local/embassy/mindcore1.gif);}
#karik.vn-char { --mindcoreImg: url(/img/local/embassy/mindcore2.gif);}
#itzilBusted.vn-char { --mindcoreImg: url(/img/local/embassy/mindcore1busted.gif)}

#ikgolem.vn-char { height: 150vmin }
#ikgolem.vn-char .head { background-image: url(/img/sprites/obesk/ikgol/full/head.gif);}
.vn-wrapper.vn-con #ikgolem .head { background-image: url(/img/sprites/obesk/ikgol/full/head.gif), url(/img/sprites/obesk/ikgol/full/connector.gif)}
.vn-wrapper.vn-con #ikgolem.awake .head { background-image: url(/img/sprites/obesk/ikgol/full/head_awake.gif), url(/img/sprites/obesk/ikgol/full/connector.gif)}
    .vn-wrapper[pos*="basehead"] #ikgolem .head,
    .vn-wrapper[pos*="basehead"].vn-con #ikgolem .head { background-image: url(/img/sprites/obesk/ikgol/full/head_nostyle.gif) }
#ikgolem.vn-char .body { background-image: url(/img/sprites/obesk/ikgol/full/body.gif);}
#ikgolem.vn-char .arms { background-image: url(/img/sprites/obesk/ikgol/full/arms.gif);}

/* VN - geli */
.vn-char.vn-geli {
    height: 250vmin;
    --charTransform: translateY(-10%);
    --expression: url(/img/sprites/obesk/geli/full/face_neutral.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_neutral.gif);
}
.vn-char.vn-geli[expression="concern"] { 
    --expression: url(/img/sprites/obesk/geli/full/face_concerned.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_concerned.gif);
}
.vn-char.vn-geli[expression="think"] { 
    --expression: url(/img/sprites/obesk/geli/full/face_thinking.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_thinkingalt.gif);
}
.vn-char.vn-geli[expression="happy"] { 
    --expression: url(/img/sprites/obesk/geli/full/face_pleased.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_pleased.gif);
}
.vn-char.vn-geli[expression="uncanny"] { 
    --expression: url(/img/sprites/obesk/geli/full/face_uncanny.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_concerned.gif);
}
.vn-char.vn-geli[expression="blueeyes"] { 
    --expression: url(/img/sprites/obesk/geli/full/face_happysmiler.gif);
    --receptors: url(/img/sprites/obesk/geli/full/receptors_thinking.gif);
}

.vn-char.vn-geli .head { background-image: var(--expression), url(/img/sprites/obesk/geli/full/hat.gif), url(/img/sprites/obesk/geli/full/head.gif); transform: translate(1%); animation: TINYSWAY 7s EASE-IN-OUT infinite alternate; z-index: 2; transition: all 3s ease-in-out, background-image 0s; image-rendering: auto; }
.vn-char.vn-geli .head::before {content: ""; background-image: var(--receptors); background-size: inherit; transition: all 200ms ease-in-out; transform: scale(1); z-index: -1;}
.vn-char.vn-geli .body { background-image: url(/img/sprites/obesk/geli/full/collar.gif), url(/img/sprites/obesk/geli/full/body.gif) }
.vn-char.vn-geli .body::before {
    background-image: url(/img/sprites/obesk/geli/full/arms.gif);
    background-size: inherit;
    content: "";
    transition: all 3s ease-in-out, background-image 0s;
    animation: TINYHOVER 10s EASE-IN-OUT infinite alternate;
}

.gelioff .vn-char.vn-geli .head {background-image: url(/img/sprites/obesk/geli/full/hat.gif), url(/img/sprites/obesk/geli/full/head_inactive.gif); transform: translateY(5%)}
.gelioff .vn-char.vn-geli .head::before { transform: scale(0.85); opacity: 0; }
.gelioff .vn-char.vn-geli .body { background-image: url(/img/sprites/obesk/geli/full/collar_deactivated.gif), url(/img/sprites/obesk/geli/full/body_deactivated.gif) }
.geliboot .vn-char.vn-geli .body::before { transform: var(--baseTransform) translateY(1%) }
.geliboot .vn-char.vn-geli .head {background-image: url(/img/sprites/obesk/geli/full/hat.gif), url(/img/sprites/obesk/geli/full/head_boot.gif); transform: var(--baseTransform) translateY(1%)}
.gelioff .vn-char.vn-geli .body::before, .gelioff .vn-char.vn-geli .head, 
.geliboot .vn-char.vn-geli .body::before, .geliboot .vn-char.vn-geli .head {animation: unset;}

.fakegeli .vn-char.vn-geli {
    --expression: url(/img/sprites/obesk/geli/fake/full/face_neutral.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_neutral.gif);
}
.fakegeli .vn-char.vn-geli[expression="concern"] { 
    --expression: url(/img/sprites/obesk/geli/fake/full/face_concerned.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_concerned.gif);
}
.fakegeli .vn-char.vn-geli[expression="think"] { 
    --expression: url(/img/sprites/obesk/geli/fake/full/face_thinking.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_thinkingalt.gif);
}
.fakegeli .vn-char.vn-geli[expression="happy"] { 
    --expression: url(/img/sprites/obesk/geli/fake/full/face_pleased.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_pleased.gif);
}
.fakegeli .vn-char.vn-geli[expression="uncanny"] { 
    --expression: url(/img/sprites/obesk/geli/fake/full/face_uncanny.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_concerned.gif);
}
.fakegeli .vn-char.vn-geli[expression="blueeyes"] { 
    --expression: url(/img/sprites/obesk/geli/fake/full/face_happysmiler.gif);
    --receptors: url(/img/sprites/obesk/geli/fake/full/receptors_thinking.gif);
}

.fakegeli .vn-char.vn-geli .head { background-image: var(--expression), url(/img/sprites/obesk/geli/fake/full/hat.gif), url(/img/sprites/obesk/geli/fake/full/head.gif); transform: translate(1%); animation: TINYSWAY 7s EASE-IN-OUT infinite alternate; z-index: 2; transition: all 3s ease-in-out, background-image 0s; image-rendering: auto; }
.fakegeli .vn-char.vn-geli .head::before {content: ""; background-image: var(--receptors); background-size: inherit; transition: all 200ms ease-in-out; transform: scale(1); z-index: -1;}
.fakegeli .vn-char.vn-geli .body { background-image: url(/img/sprites/obesk/geli/fake/full/collar.gif), url(/img/sprites/obesk/geli/fake/full/body.gif) }
.fakegeli .vn-char.vn-geli .body::before {
    background-image: url(/img/sprites/obesk/geli/fake/full/arms.gif);
    background-size: inherit;
    content: "";
    transition: all 3s ease-in-out, background-image 0s;
    animation: TINYHOVER 10s EASE-IN-OUT infinite alternate;
}

.fakegeli.gelioff .vn-char.vn-geli .head {background-image: url(/img/sprites/obesk/geli/fake/full/hat.gif), url(/img/sprites/obesk/geli/fake/full/head_inactive.gif); transform: translateY(5%)}
.fakegeli.gelioff .vn-char.vn-geli .head::before { transform: scale(0.85); opacity: 0; }
.fakegeli.gelioff .vn-char.vn-geli .body { background-image: url(/img/sprites/obesk/geli/fake/full/collar_deactivated.gif), url(/img/sprites/obesk/geli/fake/full/body_deactivated.gif) }
.fakegeli.geliboot .vn-char.vn-geli .body::before { transform: var(--baseTransform) translateY(1%) }
.fakegeli.geliboot .vn-char.vn-geli .head {background-image: url(/img/sprites/obesk/geli/fake/full/hat.gif), url(/img/sprites/obesk/geli/fake/full/head_boot.gif); transform: var(--baseTransform) translateY(1%)}
.fakegeli.gelioff .vn-char.vn-geli .body::before, .fakegeli.gelioff .vn-char.vn-geli .head, 
.fakegeli.geliboot .vn-char.vn-geli .body::before, .fakegeli.geliboot .vn-char.vn-geli .head {animation: unset;}

.vn-char.vn-geli.bstrdized {
    height: 250vmin;
    --charTransform: translateY(-10%);
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_neutral.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_neutral.gif);
}
.vn-char.vn-geli.bstrdized[expression="concern"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_concerned.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_concerned.gif);
}
.vn-char.vn-geli.bstrdized[expression="think"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_thinking.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_thinkingalt.gif);
}
.vn-char.vn-geli.bstrdized[expression="bstrd"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_bstrd.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_pleased.gif);
}
.vn-char.vn-geli.bstrdized[expression="happy"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_pleased.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_pleased.gif);
}
.vn-char.vn-geli.bstrdized[expression="uncanny"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_uncanny.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_concerned.gif);
}
.vn-char.vn-geli.bstrdized[expression="blueeyes"] { 
    --expression: url(/img/sprites/obesk/geli/bsteli/full/face_happysmiler.gif);
    --receptors: url(/img/sprites/obesk/geli/bsteli/full/receptors_thinking.gif);
}

.vn-char.vn-geli.bstrdized .head { background-image: var(--expression), url(/img/sprites/obesk/geli/bsteli/full/hat.gif), url(/img/sprites/obesk/geli/bsteli/full/head.gif); transform: translate(1%); animation: TINYSWAY 7s EASE-IN-OUT infinite alternate; z-index: 2; transition: all 3s ease-in-out, background-image 0s; image-rendering: auto; }
.vn-char.vn-geli.bstrdized .head::before {content: ""; background-image: var(--receptors); background-size: inherit; transition: all 200ms ease-in-out; transform: scale(1); z-index: -1;}
.vn-char.vn-geli.bstrdized .body { background-image: url(/img/sprites/obesk/geli/bsteli/full/collar.gif), url(/img/sprites/obesk/geli/bsteli/full/body.gif) }
.vn-char.vn-geli.bstrdized .body::before {
    background-image: url(/img/sprites/obesk/geli/bsteli/full/arms.gif);
    background-size: inherit;
    content: "";
    transition: all 3s ease-in-out, background-image 0s;
    animation: TINYHOVER 10s EASE-IN-OUT infinite alternate;
}

/* kivii */
.vn-char#kivii {
    --charTransform: translateY(-50vh);
}

.vn-char#kivii img {
    opacity: 0;
    max-height: 80vh;
}

.vn-char#kivii::after { 
    content: "";
    background: url(/img/sprites/combat/foes/kivii/1.gif), url(/img/sprites/combat/foes/kivii/2.gif),  url(/img/sprites/combat/foes/kivii/3.gif),  url(/img/sprites/combat/foes/kivii/4.gif);
    opacity: 0.1;
    background-position: center;
    width: 1px;
    height: 1px;
    position: absolute;
}

.vn-char#kivii .sprite.swap {
    background-image: url(/img/sprites/combat/foes/kivii/1.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.vn-wrapper[pos*="step2"] .vn-char#kivii .sprite.swap {
    background-image: url(/img/sprites/combat/foes/kivii/2.gif);
}

.vn-wrapper[pos*="step3"] .vn-char#kivii .sprite.swap {
    background-image: url(/img/sprites/combat/foes/kivii/3.gif);
}

.vn-wrapper[pos*="step4"] .vn-char#kivii .sprite.swap {
    background-image: url(/img/sprites/combat/foes/kivii/4.gif);
}

.vn-char#kivii .spritestack::before, .vn-char#kivii .spritestack::after,
#realgrid .kivii .spritestack::before, #realgrid .kivii .spritestack::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 100%;
    background-image: url(/img/sprites/combat/foes/kivii/gauntlet.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 60%;
    --baseTransform: translateX(50%);
    transform: var(--baseTransform);
    animation: HOVER 5s ease-in-out infinite alternate;
}

.vn-char#kivii .spritestack::before, #realgrid .kivii .spritestack::before {
    --baseTransform: translateX(-50%) rotateY(180deg);
}

/* e3a2 */

/* fake */
.vn-char#fakerloper .body {
    background: url(/img/sprites/loper.gif);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* BSTID */
.vn-char.vn-bstrd {
    --charTransform: translateY(-10%);
}

.vn-bstrd .head {
    background-image: url(/img/sprites/combat/foes/bstface.gif), url(/img/sprites/combat/foes/bsthead.gif);
}

.vn-bstrd .body {
    background-image: url(/img/sprites/combat/foes/bstbody.gif);
}

.vn-bstrd .arms {
    background-image: url(/img/sprites/combat/foes/bstarms.gif);
}

body[quality="regular"] .vn-bstrd .arms, body[quality="regular"] .vn-bstrd .head {
    animation: TINYHOVER 3s ease-in-out infinite alternate;
}

.bstrd-hold .vn-bstrd .arms {
    background-image: url(/img/sprites/combat/foes/bstgun.gif);
}

.geli-hold .vn-char.vn-geli.bstrdized .body::before {
    background-image: url(/img/sprites/obesk//geli/bsteli/full/arms_gun.gif);
}

/* e4 qou */
.vn-char#telyu {
    --charTransform: translateY(5%);
    height: 180vmin;
}

#telyu.vn-char .head { background-image: url(/img/sprites/obesk/telyu/full/head.gif) }
#telyu.vn-char .torso { background-image: url(/img/sprites/obesk/telyu/full/torso.gif) }
#telyu.vn-char .legs { background-image: url(/img/sprites/obesk/telyu/full/legs.gif) }
#telyu.vn-char .tail { background-image: url(/img/sprites/obesk/telyu/full/tail.gif) }

.vn-char#idril {
    --charTransform: translateY(5%);
    height: 180vmin;
}

#idril.vn-char .head { background-image: url(/img/sprites/obesk/idril/full/head.gif)}
#idril.vn-char .body { background-image: url(/img/sprites/obesk/idril/full/tubes.gif), url(/img/sprites/obesk/idril/full/body.gif) }
#idril.vn-char .arm { background-image: url(/img/sprites/obesk/idril/full/arm.gif);}

.vn-char#vekprox {
    --charTransform: translateY(5%);
    height: 180vmin;
}

#vekprox.vn-char .head { background-image: url(/img/sprites/vekoa/vekoaprox_head.gif); animation: TINYHOVER 30s ease-in-out infinite alternate;}
#vekprox.vn-char .body { background-image: url(/img/sprites/vekoa/vekoaprox_body.gif)}

.vn-char#malvisig {height: 180vmin;}
#malvisig.vn-char .body { background-image: url(/img/local/embassy/parpy/malvifull.gif)}

.vn-wrapper[for="arbitrary"] {
    height: 100vh;
    z-index: -1;
    position: absolute;
    top: 0;
}

.vn-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vn-image img {
    max-height: 100vh;
    max-width: 50vw;
}

/* e4a1 characters */
#collector.vn-char {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 3s ease-in-out;
    transform-origin: center;
}

.vn-wrapper[pos*="far"] #collector {
  --baseTransform: translateY(-100px) scale(0.17);
}

.vn-char .collectorpart {
    width: inherit;
    height: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: unset;
}

#collectorbody {
    background: url(/img/sprites/director/collector_body.gif);
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 2800px;
    top: 0;
}

#collectorhead-animator {
    animation: SLIGHTHOVER 10s ease-in-out infinite alternate;
    z-index: 3;
}

#collectorhead {
    width: 555px;
    height: 584px;
    top: 10px;
    perspective: 1000px;
    transition: transform 2s ease-in-out;
}

#collectorhead::before, #collectorhead::after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: url(/img/sprites/director/collector_head_filler.gif), url(/img/sprites/director/collector_head_handle.gif?);
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 50px center;
    transition: transform 2s ease-in-out;
}

#collectorhead::after {
    background-image: url(/img/sprites/director/collector_head_filler.gif), url(/img/sprites/director/collector_head.gif?);
}

#collectoreye {
    transform: translate(-230px);
    z-index: 2;
    transition: transform 400ms ease-in-out, opacity 100ms linear;
    transform: translate(-230px) scaleY(0.001);
}

#collectoreye::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/img/sprites/director/collector_eye.gif);
    background-repeat: no-repeat;
    background-position: center;
    animation: FLOWERBLINK 10s ease-in-out infinite alternate;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

#collectoreye::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 100%;
    background: url(/img/sprites/director/collector_eye_collection.gif);
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 2s ease-in-out;
    transition-delay: 1s;
    opacity: 0;
}

#collectort {
    background: black;
    border-radius: 100%;
    opacity: 0;
    transition: opacity 4s, transform 10s ease-in-out;
    transform: scale(2);
    z-index: -1;
}

.vn-wrapper[pos*="open"] #collector #collectort {
    transform: translateX(-230px);
}

.vn-wrapper[pos*="open"] #collector #collectorhead { transform: translateX(230px) }
.vn-wrapper[pos*="open"] #collector #collectorhead::after { transform: rotateY(-180deg) }

.vn-wrapper:not([pos*="open"]) #collector #collectoreye { opacity: 0; }
.vn-wrapper[pos*="eye"] #collector #collectoreye { opacity: 1; transform: translate(-230px); }
.vn-wrapper[pos*="eye"] #collector #collectoreye::after, .vn-wrapper[pos*="eye"] #collector #collectoreye::before { opacity: 1; }


.vn-wrapper[pos*="transit"] #collector #collectort {
    transform: translateX(-230px) scale(4);
    opacity: 1;
}

.vn-wrapper[pos*="prep"] #collector #collectort {
    transition-delay: 3s;
}

.vn-wrapper[pos*="prep"] #collector #collectorhead {
    transition: transform 8s ease-in-out
}

.vn-wrapper[pos*="transit"] #collector #collectorhead::before,
.vn-wrapper[pos*="transit"] #collector #collectorhead::after {
    transition: transform 4s ease-in-out;
}

.vn-wrapper[pos*="transit"] #collector #collectorhead {
    transform: scale(5) translateX(230px);
    transform-origin: center;
}

.vn-wrapper[pos*="transit"] #collector #collectorhead::before {
    transform: scale(1.5) rotateY(-60deg);
}

.vn-wrapper[pos*="transit"] #collector #collectorhead::after {
    transform: scale(1.5) rotateY(-110deg);
}

@keyframes FLOWERBLINK {
    0% { transform: translateZ(1px) scaleY(1) }
    95% { transform: translateZ(1px) scaleY(1) }
    100% { transform: translateZ(1px) scaleY(0.001) }
}

@keyframes SLIGHTHOVER {
    0% { transform: translateY(-1%) rotate(-0.5deg) }
    100% { transform: translateY(1%) rotate(0.5deg) }
}

/* special VN transforms based on focus */
#vn.focused .vn-wrapper.active:not(.vn-party) {
    max-width: calc(40vw / var(--effectiveChars));
    opacity: 0.3;
}

#vn.focused .vn-wrapper.active.vn-focus {
    opacity: 1;
    max-width: 50vw;
    z-index: 2;
}

/* VN - positional styling - this is mostly based on the qou characters so it might look weird for other stuff */
.vn-wrapper[pos*="far"], .vn-wrapper[pos*="downleft"], .vn-wrapper[pos*="downright"] { 
    max-width: calc(50vw / var(--effectiveChars)); 
    z-index: -1;
}

.vn-wrapper[pos*="far"] .vn-char {
    --baseTransform: scale(0.35) translateY(-150%);
}

.vn-wrapper[pos*="far"] .vn-mindcore.vn-char {
    --baseTransform: scale(0.35) translateY(-20%);
}

.vn-wrapper[pos*="downleft"] .vn-char {
    --baseTransform: scale(0.66) translateY(-30%) translateX(-30%)
}

.vn-wrapper[pos*="downright"] .vn-char {
    --baseTransform: scale(0.66) translateY(-30%) translateX(30%)    
}

.vn-wrapper[pos*="shiftright"] .vn-char {
    --baseTransform: translateX(50%)
}

.vn-wrapper[pos*="shiftleft"] .vn-char {
    --baseTransform: translateX(-50%)
}

.vn-wrapper[pos*="shifttinyright"] .vn-char {
    --baseTransform: translateX(25%)
}

.vn-wrapper[pos*="shifttinyleft"] .vn-char {
    --baseTransform: translateX(-25%)
}

.vn-wrapper.active[pos*="nonvis"] {
    opacity: 0;
}

.vn-wrapper[pos*="fardown"] .vn-char {
    --baseTransform: scale(0.3) translateY(-150%);
}

/* special positions */
.vn-wrapper[pos*="climb"] .vn-char { /* a non-mindcore should probably never ever use this */
    --baseTransform: rotate(-90deg) translateX(80vmin) translateY(35vw) scale(0.5);
}

/* special VN guys */
.vn-char#bstrdface {
    width: 40vw;
    background-image: url(/img/sprites/bstrd/bstrd.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.vn-wrapper[for="tgolem"], .vn-wrapper[for="agolem"] { position: absolute; z-index: -3;}

.vn-char#tgolem {
    --baseTransform: translateX(-20vw) translateY(-30vh) scale(0.25);
}

.vn-wrapper[pos*="center"] .golemchar#tgolem { --baseTransform: translateY(-30vh) scale(0.4); }
.vn-wrapper[pos*="approach"] .golemchar#tgolem { --baseTransform: scale(1) translateX(-5vw) translateY(10vh); }

.golemchar.vn-char .golemsprite {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.golemchar.vn-char img {
    width: 100%;
    bottom: 0;
}

.golemchar.vn-char .golemsprite .golemsprite-head {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.golemchar.vn-char .golemsprite-head::after {
    top: 0;
}

.vn-wrapper[pos*="downed"] #agolem {
    transform: translate(-40%, -50%) rotate(80deg) rotateX(20deg) scale(0.7);
}

.vn-wrapper[pos*="attacking"] #agolem {
    transform: scale(1.75) translate(-50%, 25%);
}

#agolem .golemsprite, 
#agolem .spritestack, 
#agolem .sprite, 
#agolem img {
  animation-play-state: paused;
}

#echovn {
    transform: translateY(15vw);
    display: flex;
    justify-content: center;
    align-items: center;
}

#echovn::after, #echovn::before {
    content: "";
    position: absolute;
    transform-origin: center;
    height: 75vmin;
    width: 75vmin;
    background: url(/img/textures/spotgradientinverse.gif);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}

#echovn::before {
    background-image: url(/img/textures/disruptionM.gif);
    z-index: 2;
    border-radius: 100%;
    width: 20vmin;
    height: 20vmin;
}

/* party-based VN-chars */
.vn-wrapper.vn-party .vn-char div {
    --baseTransform: translateX(-50%);
}

.vn-wrapper.vn-party, 
.vn-wrapper.vn-party .vn-char {
    max-width: 25vw;
}

.vn-wrapper.vn-party {
    position: absolute;
}

.in-dialogue .vn-wrapper.vn-party {
    opacity: 0;
}

.vn-wrapper.vn-party .vn-char { --baseTransform: translateX(47vw) }
.vn-wrapper.vn-party:first-of-type .vn-char { --baseTransform: translateX(-47vw) }

.mui-active .vn-wrapper.vn-party .vn-char { --baseTransform: translateX(35vw) }
.mui-active .vn-wrapper.vn-party:first-of-type .vn-char { --baseTransform: translateX(-35vw) }

.in-dialogue .vn-wrapper.vn-party .vn-char { --baseTransform: translateX(80vw) }
.in-dialogue .vn-wrapper.vn-party:first-of-type .vn-char { --baseTransform: translateX(-80vw) }

/* lame backwards bompabibibilbiity stuff */
.vn1-backwards-compat .vn-wrapper[for="gakvu"] { order: -5 }
.vn1-backwards-compat .vn-wrapper[for="tozik"] { order: 5 }

/* special "cut" functionality, class to be added to body */
.hard-cut .menu-box,
.hard-cut #content,
.hard-cut:not(.darkflash) #static,
.hard-cut #mindspike-scanner, 
.hard-cut #readout,
.hard-cut #meta-menu {
    transition: 1ms !important;
}

.hard-cut #static {
    background: transparent !important;
    color: transparent !important;
}

.hard-cut::before, .hard-cut::after, .hard-cut #static::before, .hard-cut #static::after, .hard-cut #static .enter {
    display: none !important
}

/* skip dialog */
#dialogue-skip {
    position: absolute;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: black;
    padding: 1em;
    font-size: 2em;
    gap: 1em;
}

#dialogue-skip::before {
    content: "CONFIRM::'skip stream segment'";
}

#dialogue-skip::after {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    z-index: -1;
    background: black;
    pointer-events: none;
    border: 1px solid var(--neutral-color);
}

#dialogue-skip .button {
    text-transform: uppercase;
}

/* freedom mask */
#freedomControl::after {
    content: "BTW hold shift when moving";
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-shadow: 1px 1px 10px black, 1px 1px 10px black;
    line-height: 1em;
    font-size: 25px;
    transform: translate(-50%, 0) rotate(10deg);
    background: black;
    
}

#freedomControl {
    display: none;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    bottom: 20px;
    right: 20px;
    width: 300px;
    height: 200px;
    padding: 10px 50px;
    background: url(/img/textures/paperplate.gif);
    background-size: 100% 100%;
    z-index: 1000;
    font-size: 30px;
    opacity: 0;
    pointer-events: none;
    transition: 400ms;
    text-shadow: 1px 1px 10px black, 1px 1px 10px black;
}

.mask-freedom.stage-active #freedomControl {
    display: flex;
}

.mask-freedom.mui-active.stage-active #freedomControl {
    opacity: 1;
    pointer-events: initial;
}

#freedomControl label {
    display: block;
    margin-bottom: 5px;
}

#freedomSensitivitySlider {
    width: 200px;
}

#freedomWalkToggle {
    margin-right: 5px;
}

body[menu="system"] #freedomControl,
body[menu="entities"] #freedomControl {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #freedomSensitivitySlider {
        overflow: hidden;
        -webkit-appearance: none;
        background-color: transparent;
    }

    #freedomSensitivitySlider::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        color: var(--bastard-color);
        margin-top: -1px;
    }

    #freedomSensitivitySlider::-webkit-slider-thumb {
        width: 10px;
        -webkit-appearance: none;
        height: 10px;
        cursor: ew-resize;
        background: var(--neutral-color);
        box-shadow: -200px 0 0 200px var(--bastard-color);
    }

}

/** FF*/
#freedomSensitivitySlider::-moz-range-progress {
    background-color: var(--bastard-color); 
}
#freedomSensitivitySlider::-moz-range-track {  
    background-color: var(--neutral-color);
}

/* mouse ping */
.ping {
    position: fixed;
    top: 0;
    left: 0;
    --baseTransform: translate(-50%, -50%);
    --duration: 1000ms;
    border: 2px dashed var(--neutral-color);
    width: 20px;
    height: 20px;
    animation: PING var(--duration) linear;
    z-index: 999;
    border-radius: 100%;
}

@keyframes PING {
    0% { 
        transform: var(--baseTransform) rotate(360deg) scale(5);
        opacity: 0;
    }    

    50% {
        transform: var(--baseTransform) rotate(180deg) scale(3);
        opacity: 1;
    }

    90% {
        transform: var(--baseTransform) rotate(0deg) scale(1);
        opacity: 1;
    }

    92% { transform: var(--baseTransform); opacity: 0; }
    96% { transform: var(--baseTransform); opacity: 1; }
    100% { transform: var(--baseTransform); opacity: 0; }
}