* { box-sizing: border-box; }

html body .scene-wrapper .box.selected .face {
	border: 1px solid #992;
	background: rgba(240,240,128,0.7);
	color: #111;
}

html body .scene-wrapper .box.selected-alt .face {
	border: 1px solid #922;
	background: rgba(240,128,128,0.7);
	color: #111;
}

.scene {
	--scene-width: 0px;
	--scene-height: 0px;
	--scene-depth: 1200px;
	--scene-translateX: 0px;
	--scene-translateY: 0px;
	--scene-translateZ: calc(var(--scene-depth) / 2);
	--scene-rotateX: 0deg;
	--scene-rotateY: 0deg;
	--scene-rotateZ: 0deg;
	--scene-scale: 1;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--scene-width);
	height: var(--scene-height);
	transform-style: preserve-3d;
	position: relative;
}

.scene-wrapper {
	overflow: hidden;
	transform-style: preserve-3d;
	perspective: var(--scene-depth);
}

.scene.ortho {
	perspective: none;
	transform-style: flat;
}

.scene svg, .scene svg * {
	pointer-events: none;
}

.scene:hover { cursor: grab; }

.scene .box:hover { cursor: auto; }

.scene .layer {
	position: absolute;
	background: transparent;
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.scene.ortho .layer.world {
	transform: scale(var(--scene-scale)) translate3d(var(--scene-translateX),var(--scene-translateY),var(--scene-translateZ)) rotateY(0deg) rotateZ(0deg) rotateX(-180deg);
}

.scene .layer.world.grid-lines {
	background: repeating-linear-gradient(0deg, var(--grid-space), var(--grid-space) calc(var(--grid-size) - var(--grid-stroke)), var(--grid-color) var(--grid-size), var(--grid-color) var(--grid-size))
	,repeating-linear-gradient(90deg, var(--grid-space), var(--grid-space) calc(var(--grid-size) - var(--grid-stroke)), var(--grid-color) var(--grid-size), var(--grid-color) var(--grid-size));
	background-blend-mode: multiply;
}

.scene .layer.world {
	
	--grid-space: transparent;
	--grid-size: 100px;
	--grid-color: #111;
	--grid-stroke: calc(1px + (1px / var(--scene-scale)));
	
	/*border: calc(var(--grid-stroke)/2) solid var(--grid-color);*/
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(var(--scene-scale)) translate3d(var(--scene-translateX),var(--scene-translateY),var(--scene-translateZ))
	 	rotateY(var(--scene-rotateX)) rotateX(calc(180deg + var(--scene-rotateY))) rotateZ(var(--scene-rotateZ));
}

.box {
	--box-width: 0px;
	--box-height: 0px;
	--box-depth: 0px;
	--box-translateX: 0px;
	--box-translateY: 0px;
	--box-translateZ: 0px;
	--box-rotateX: 0deg;	
	--box-rotateY: 0deg;	
	--box-rotateZ: 0deg;
	--box-scale: 1;
	--box-color: #ccc;
	position: absolute;
	width: 0;
	height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	offset-rotate: auto 90deg;
	transform:
		scale(var(--box-scale))
		translate3d(var(--box-translateX),var(--box-translateY),var(--box-translateZ))
	 	rotateY(var(--box-rotateX)) rotateX(var(--box-rotateY)) rotateZ(var(--box-rotateZ));
}

.group {
	transform-style: preserve-3d;
}

.box > .inner {
	transform-style: preserve-3d;
	position: absolute;
	--box-color: inherit;
}

.box.borders .face { border: 1px solid #333; }

.scene.ortho .box > .inner > .face:not(.top) { display: none; } /* in 2d mostro solo la faccia "top" */

.box.backface-0 > .face { backface-visibility: hidden; }

.box.backface-1 > .face { backface-visibility: visible; }

.box .face {
	--face-width: 0px;
	--face-height: 0px;
	--face-color: var(--box-color);
	display: flex;
	align-items: center;
	justify-content: center;	
	user-select: none;
	position: absolute;
	width: var(--face-width);
	height: var(--face-height);
	left: calc(var(--face-width)/-2);
	top: calc(var(--face-height)/-2);
	backface-visibility: visible;
	background: var(--face-color);
}

.box.zero-down .inner {
	transform: translateZ(calc(var(--box-depth) / -2));
}

.box.zero-top .inner {
	transform: translateZ(calc(var(--box-depth) / 2));
}

.scene.ortho .box .face.top {
	transform: rotateX(180deg) translateZ(0px);
}

.box .face.top {
	transform: rotateX(180deg) translateZ(calc(var(--box-depth)/2));
	--face-width: var(--box-width); --face-height: var(--box-height);
	filter: brightness(120%);
}

.box .face.right {
	transform: rotateY(90deg) rotateZ(90deg) translateZ(calc(var(--box-width)/2));
	--face-width: var(--box-height); --face-height: var(--box-depth);
	filter: brightness(110%);
}
.box .face.left {
	transform: rotateX(-90deg) rotateZ(180deg) translateZ(calc(var(--box-height)/2));
	--face-width: var(--box-width); --face-height: var(--box-depth);
	filter: brightness(100%);
}
.box .face.down {
	transform: rotateX(0deg) translateZ(calc(var(--box-depth)/2));
	--face-width: var(--box-width); --face-height: var(--box-height);
	filter: brightness(90%);
}
.box .face.back {
	transform: rotateY(-90deg) rotateZ(-90deg) translateZ(calc(var(--box-width)/2));
	--face-height: var(--box-depth); --face-width: var(--box-height);
	filter: brightness(80%);
}
.box .face.front {
	transform: rotateX(-90deg) rotateY(180deg) rotateZ(180deg) translateZ(calc(var(--box-height)/2));
	--face-width: var(--box-width); --face-height: var(--box-depth);
	filter: brightness(70%);
}

.box:not(.selected).border .face { border: 1px solid #000; }

.box.defaults { font-family: 'Verdana'; font-weight: bold; font-size: 14px; }
.box.defaults .face { opacity: 0.8; }
.box.defaults .face.top { background: linear-gradient(45deg, #2c2, #2c2,  #5f5); color: #eee; }
.box.defaults .face.down { background: linear-gradient(45deg, #cc2, #cc2, #ff5); color: #eee; }
.box.defaults .face.right { background: linear-gradient(45deg, #c22, #c22, #f55); color: #eee; }
.box.defaults .face.left { background: linear-gradient(45deg, #c2c, #c2c, #f5f); color: #111; }
.box.defaults .face.front { background: linear-gradient(45deg, #22c, #22c, #55f); color: #111; }
.box.defaults .face.back { background: linear-gradient(45deg, #2cc, #2cc, #5ff); color: #111; }

.selection-rect {
	position: absolute;
	background: rgba(240,192,128,0.7);
	border: 1px dotted rgba(120,96,64,0.5);
	z-index: 9;
}

.scene.playing .box {
	animation-play-state: running;
}

.box.selected .face {
	--face-color: #888;
	backface-visibility: visible;
	border: 1px solid rgba(0,0,0,0.25);	
	opacity: 0.8;
	background: var(--face-color);
}

.box:not(.selected) .face {
	background-color: var(--face-color);
}

.box:not(.selected) .face.top {
	--face-color: var(--box-color);
}

.cube {
	--cube-size: 0;
	--box-width: var(--cube-size);
	--box-height: var(--cube-size);
}

/* ROTATOR CUBE */

.gizmo-wrapper {
	--gizmo-body: 80px;
	--gizmo-padding: 10px;
	--gizmo-size: calc(var(--gizmo-body) + (var(--gizmo-padding) * 2));
	width: var(--gizmo-size);
	height: var(--gizmo-size);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9;
	perspective: calc(var(--gizmo-size) * 2);
	transform-style: preserve-3d;
}

.gizmo-wrapper > :first-child {
	position: absolute;
	transform-style: preserve-3d;
	z-index: 1;
	transform: rotateX(-180deg);
}

.gizmo-wrapper .box.cube {
	--box-width: var(--gizmo-size);
	--box-height: var(--gizmo-size);
	--box-depth: var(--gizmo-size);
	transform-style: preserve-3d;
}

.box-pivot {
	position: absolute;
	transform-style: preserve-3d;
	--pivot-length: 100px;
	--pivot-min-width: 4px;
	--pivot-width: max(calc(var(--pivot-length) / 20),var(--pivot-min-width));
}

.box-pivot .inner {
	transition: all 1s;
}

.box-pivot .coord-x {
	--box-width:var(--pivot-length);
	--box-height:var(--pivot-width);
	--box-depth:var(--pivot-width);
	--box-color: #a22;
	transform: translateX(calc(var(--pivot-length) / 2));
}

.box-pivot .coord-x:hover {
	--box-color: #f55;
}

.box-pivot .coord-y {
	--box-width:var(--pivot-width);
	--box-height:var(--pivot-length);
	--box-depth:var(--pivot-width);
	--box-color: #22a;
	transform: translateY(calc(var(--pivot-length) / 2));
}

.box-pivot .coord-y:hover {
	--box-color: #55f;
}

.box-pivot .coord-z {
	--box-width:var(--pivot-width);
	--box-height:var(--pivot-width);
	--box-depth:var(--pivot-length);
	--box-color: #2a2;
	transform: translateZ(calc(var(--pivot-length) / -2));
}

.box-pivot .coord-z:hover {
	--box-color: #5f5;
}

#scene {
	--scene-width: 100%;
	--scene-height: 480px;
	--scene-depth: 800px;
}

@keyframes move-along-path {
	from { offset-distance: 0%; }
	to { offset-distance: 100%; }
}

.path-point {
	--point-index: attr(data-index);
	--point-radius: 12px;
	--point-color: #aaa;
	--point-x: 0;
	--point-y: 0;
	--point-rotate: 0deg;
	--point-rounded: var(--point-radius);
	--point-text-color: #222;
	--point-text: "";
	position: absolute;
	width: calc(var(--point-radius) * 2);
	aspect-ratio: 1;
	border-radius: var(--point-rounded);
	background-color: var(--point-color);
	transform: translateX(var(--point-x)) translateY(var(--point-y)) rotateZ(var(--point-rotate));
}

.path-point::before {
	content: attr(data-index);
	font-size: 14pt;
	color: var(--point-text-color);
	width: calc(var(--point-radius) * 2);
	aspect-ratio: 1;
}

.path-point.with-text::after {
	content: var(--point-text);
	font-size: 8pt;
	font-weight: bold;
	left: 2em;
	top: 2em;
	width: 6em;
	height: 2em;
	background: rgba(192,192,192,0.75);
	border-radius: 0.5em;
	color: #222;
}

.path-point.with-text {
	border-radius: calc(var(--point-radius) / 4);
}

.path-point::before, .path-point::after {
	white-space: nowrap;
	position: absolute;
	transform: rotateZ(calc(var(--point-rotate) * -1)) rotateX(180deg);
	display: flex;
	justify-content: center;
	align-items: center;
}

.path-point.selected::before {
	font-weight: bold;
}

.path-point.path-from {
	--point-color: #cc0;
	--point-radius: 18px;
	--point-rotate: 0deg;
}

.path-point.path-goal {
	--point-radius: 18px;
	--point-rounded: 0;
	--point-color: #00c;
	--point-rotate: 45deg;
	--point-text-color: #eee;
}

.box-items-list .box-item > label:first-child::after {
	content: "=";
}

#gizmoWrapper {
	--gizmo-size: 64px;
	position: absolute;
	right: 100px;
	bottom: 100px;
}