body {
	background-color: #DDD;
	font-family: 'Montserrat';
	color: #222;
	text-align: center;
	margin: 0;
	cursor: url('svg/cursor-default.svg'), default;
	overflow: hidden;
}

canvas {display: none;}

div, button {
	box-sizing: border-box !important;
}

button {
	appearance: none;
	background-color: transparent;
	border: 0;
	font-family: 'Montserrat';
	padding: 0;
	margin: 0;
	position: relative;
    outline: none;
}

::selection {
	background: transparent;
}

::-webkit-scrollbar {
display: none;
}

#container {
	box-sizing: border-box;
	position: absolute;
	display: flex;
	padding: 20px;
	padding-bottom: 0;
	max-height: 100vh;
	min-height: 100vh;

}
.column {
	position: relative;
	//max-height: 100%;
	height: 100vh;
	box-sizing: content-box;
}

.side.column {
	flex-grow: 1;
	padding: 10px;
	width:  450px;
	overflow-y: scroll;
	padding-bottom: 100px;
} 

.center.column {
	flex-grow: 2;
	text-align: center;
	width:  512px;
	overflow-y: scroll;
}

.left.column {
	direction: rtl;
}

.left.column div {
	direction: ltr;
}

#title {
	text-align: center;
	padding:  10px 18px;
	font-weight: 900;
	font-size: 30px;
	display: inline-block;
	background-color: #222;
	color:  #FFF;
	border-radius: 3px;
	position: relative;
}

#ver {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 9px;
	font-weight: normal;
	color: #777;
}

#shaperino {
	margin: 30px auto 20px;
	width:  500px;
	height: 500px;
	text-align: center;
	position: absolute;
	top: 100px;
}

.canvas {
	pointer-events: none;
}

.canvas svg {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	transition: transform .5s ease, filter .5s ease;
}

#shaperino svg g {
	pointer-events: auto;
	transition: transform .5s ease, filter .5s ease;
	transform-origin: center;
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

#wonder-canvas svg g:hover {
	stroke: #222;
	stroke-width: 10;
	filter: hue-rotate(100deg)
}

#shaperino #hyper-canvas svg:hover  {
	animation: hyper 0.3s ease-in-out infinite alternate;
}

.section > .title {
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	margin-bottom: 15px;
}

.title.sub {
	font-size: 15px;
	margin-bottom: 15px;
	display: none;
}

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.section {
	margin-bottom: 20px;
}

.subsection {
	//margin-top: 5px;
}

.item {
	box-sizing: border-box;
	padding: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center 30%;
	position: relative;
	border-radius: 3px;
}

.item:first-child {
	margin-left: 0;
}

.item.card {
	height: 110px;
	width: 70px;
}

.item#circle { order: 1; }
.item#square { order: 2; }
.item#rhombus { order: 3; }
.item#cross { order: 4; }
.item#octagon { order: 5; }

.item#black { order: 1; }
.item#white { order: 2; }
.item#red { order: 3; }
.item#yellow { order: 5; }
.item#blue { order: 4; }

.item#top { order: 1; }
.item#right { order: 2; }
.item#bottom { order: 3; }
.item#left { order: 4; }

#hyperActivate { order: 1; }
#playgroundToggle { order: 2; }
#navigatorToggle { order: 3; }
#enigmariumToggle { order: 4; }
#viewportToggle { order: 5; }

.item.small {
	height: 60px;
	width: 60px;
}

.item.active:hover,
.unlocked.buyable:hover {
	background-color: #ccc;
}

.item.bordered {
	box-shadow:0px 0px 0px 2px #999 inset;
	background-color: #E4E4E4;
}

.item.selected {
	background-color: #fff;
	cursor: url('svg/cursor-pointer.svg'), pointer !important;
}

.item.selected:hover {
	background-color: #fff;
}

.unlocked.buyable {
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

.unlocked.unbuyable {
	opacity: 0.5;
	cursor: url('svg/cursor-default.svg'), default;
}

.item.active {
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

.label.active {
	display: inline-block;
}

.card .label {
	height: 20px;
	position: absolute;
	top: 5px;
	left: 5px;
	font-size: 15px;
}

.small .label {
	height: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 12px;
}

.label .pip {
	width: 10px;
	height: 10px;
	display: inline-block;
	margin-right: 2px;
}

.sel-main.pip { background-image: url('svg/pip-main.svg'); }
.sel-charge.pip { background-image: url('svg/pip-charge.svg'); }
.sel-split.pip { background-image: url('svg/pip-split.svg'); }
.sel-hyper.pip { background-image: url('svg/pip-hyper.svg'); }
.sel-main.pip.comp { background-image: url('svg/pip-main-comp.svg'); }
.sel-charge.pip.comp { background-image: url('svg/pip-charge-comp.svg'); }
.sel-split.pip.comp { background-image: url('svg/pip-split-comp.svg'); }
.sel-hyper.pip.comp { background-image: url('svg/pip-hyper-comp.svg'); }

.sel-hyper.pip  {
	animation: flashing 1s linear infinite;
}

@keyframes flashing {
	from {filter: hue-rotate(0deg)}
	to {filter: hue-rotate(360deg)}
}

.button.small.hyper {
	animation: flashing 1s linear infinite;
	border-color: #FF4329;
}

#charge .pip {
	display: none;
}

.counter {
	font-weight: bold;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}

.item.unlocked .counter {
	display: none;
}

.power {
	display: none;
	font-size: 10px;
	white-space: nowrap;
	font-weight: bold;
}

.selected .power,
.bordered .power  {
	display: inline-block;
}

.power div {
	display: inline;
}

.power .click {
	position: absolute;
	bottom: 5px;
	left: 5px;
	opacity: 0.6;
}

.power .idle {
	position: absolute;
	bottom: 5px;
	right: 5px;
	opacity: 0.3;
}

.button {
	position: relative;
	border-radius: 3px;
	border: 1px solid #ccc;
	cursor: url('svg/cursor-pointer.svg'), pointer;
	display: inline-block;
	text-align: center;
}

.button.small {
	padding: 7px;
	margin-right: 10px;
	//display: inline-block;
	font-size: 13px;
	text-align: center;
}

.button.large {
	position: relative;
	box-sizing: border-box;
	margin-bottom: 10px;
	height: 70px;
	width: 100%;
	vertical-align: middle;
	padding: 20px;
	padding-left: 65px;
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 10px;
	text-align: left;
	max-width: 450px;
}

.upgrade {

}

.upgrade.buyable {
	order: 1;
}

.upgrade.unbuyable {
	order: 2;
}

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

.upgrade .level {
	font-weight: bold;
	margin-left: 5px;
	background-color: #CCC;
	color: #222;
	border-radius: 3px;
	padding:  3px 5px;
	font-size: 12px;
}

.button .desc {
	display: block;
	font-size: 12px;
}

.upgrade.buyable:hover .level {
	background-color: #bbb;
}

.upgrade.hyper {
	//animation: flashing 1s linear infinite;
}

.button:hover {
	background-color: #ccc;
}

.button.inactive,
.button.unbuyable {
	opacity: 0.5;
	cursor: url('svg/cursor-default.svg'), default;
}

.button.inactive:hover,
.button.unbuyable:hover {
	background-color: transparent;
}

.button.selected {
	border-color: #FFF;
	background-color: #FFF;
}

.button.small.hyper.inactive {
	//display: none;
}

.tag {
	font-size: 12px;
	font-weight: bold;
	background-color: #CCC;
	border-radius: 3px;
}

.tag.price {
	display: inline-block;
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: right;
	background-origin: content-box;
	padding: 4px 7px 4px 9px;
}

.tag.timer {
	position: absolute;
	right: 20px;
	display: none;
	padding: 4px 7px;
}

.tag.key {
	position: absolute;
	right: 20px;
	padding: 4px 7px;
	background-color: transparent;
	border: 1px solid #ccc;
}

.tag.price span {
	margin-right: 16px;
}

.item.card .tag.price {
	margin-top: -22px;
}

.item.small .tag.price {
	margin-top: -3px;
}

.large.button .tag.price {
	position: absolute;
	right: 20px;
}

.button.buyable:hover .tag.price {
	background-color: #bbb;
}

.button:hover .tag.key {
	background-color: #bbb;
}

.button .modifier {
	font-weight: bold;
	background-color: #bbb;
	color: #222;
	border-radius: 3px;
	padding: 3px 5px;
	font-size: 10px;
	position: relative;
	bottom: 1px;
	margin-left: 5px;
}

.button:hover .modifier {
	background-color: #bbb;
}

.button.selected:hover .modifier {
	background-color: #ccc;
}

.button.inactive .modifier {
	display: none;
}

.button.large.hyper.inactive {
	animation: flashing 1s linear infinite;
	opacity: 1;
	color: #FF4329;
	border-color: #FF4329;
}



.chargebuttons {
	margin-bottom: 10px;
	margin-top: 20px;
}

.chargebuttons .button {
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: 0;
}

.chargebuttons .button > span:first-child {
	padding-left: 15px;
}

.chargebuttons .button.main { background-image: url('svg/pip-main.svg'); }
.chargebuttons .button.charge { background-image: url('svg/pip-charge.svg'); }
.chargebuttons .button.split  { background-image: url('svg/pip-split.svg'); }
.chargebuttons .button.hyper  { background-image: url('svg/pip-hyper.svg'); }

.chargebuttons .hyper {
	//display: none;
}

#charge .button.remove,
#hyper .button.remove {
	width: 30px;
	height: 30px;
	padding:  5px;
	margin-left: 10px;
	top: -2px;
	position: relative;
}

.data {
	font-size: 10px;
	margin-right: 10px;
}

.data span {
	font-weight: bold;
}

/* BLAZON */

#blazon {
	position: absolute;
	bottom: 0px;
	width:100%;
	z-index: 800;
}

#blazon span {
	display: none;
	background-color: rgba(255,255,255,0.5);
	padding: 10px 20px;
	border-radius: 5px 5px 0 0;
	display: inline-block;
	font-size: 12px;
	font-style: italic;
}

/* MENU AND PANEL */

#menu {
	display: flex;
	position: absolute;
	top: 520px;
	width: 100%;
	pointer-events: auto;
}

#menu .button {
	flex-grow: 1;
	padding: 7px 12px;
	display: inline-block;
	margin-right: 10px;
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

#menu .button:last-child {
	margin-right: 0;
}

#menu .button#remove {
	flex-grow: 0;
}

#panelContainer {
	margin: 30px auto 20px;
	max-width: 100%;
	position: absolute;
	top: 100px;
	height: 500px;
	width: 500px;
	pointer-events: none;
	z-index: 3000;
}

.panel {
	max-width: 100%;
	height: 100%;
	padding: 10px;
	background-color: #eee;
	border-radius: 3px;
	pointer-events: auto;
	overflow: scroll;
}

.panel .header {
	margin-bottom: 10px;
	width: 100%;
}

.panel .title {
	display: block;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 5px;
}

.dialog {
	position: fixed;
	top: 150px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	padding: 20px;
	width: 300px;
	border-radius: 8px;
	z-index: 6000;
}

.dialog textarea {
	width: 100%;
	height: 100px;
	margin-bottom: 20px;
}

.dialog span {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 15px;
}

.blackBox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.5;
	z-index: 5000;
}

/* FOOTER */

#footer {
	display: none;
	position: absolute;
	bottom: 20px;
	text-align: center;
	width: 100%;
	height: 50px;
}

#footer a {
	color: #222;
}

#footer img {
	width: 100px;
	height: 30px;
	background-image: url('svg/high_logo.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	margin-top: 5px;
}

#panel .container {
	margin-bottom: 10px;
}

#menu .button#debug {
	//display: none;
}

/* NAVIGATOR */

#navigator {
	margin: 30px auto 20px;
	width: 500px;
	text-align: center;
	position: absolute;
	top: 100px;
	height: 500px;
}

#board {
	width: 100%;
	max-width: 500px;
	display: inline-block;
	height: 500px;
	position: relative;
	border-radius: 3px;
	//background-color: #777;
	background: radial-gradient(#777 70%, #666);
}

#grid {
	width: 100%;
	height: 100%;
	background-image: url('svg/grid.svg');
	opacity: 0.3;
	background-size: 24px;
	animation-name: none; 
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	//overflow: hidden;
}

#ground {
	z-index: 10;
	height: 500px;
	width: 500px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(0px);
	animation-name: none; 
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.trinket {
	width: 24px;
	height: 24px;
	background-color: #000;
	position: absolute;
	top: -12px;
	left: -12px;
	
	transform: translateX(-50%);
	animation-name: none; 
	animation-duration: 10s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	z-index: 10;
}

.trinket.circle {
	border-radius: 12px;
}

.trinket.rhombus {
	//transform: rotate(45deg);
}

#board #ui {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 500px;
	height: 500px;
	z-index: 9000;
}

#board #score {
	position: absolute;
	font-size: 23px;
	font-weight: bold;
	background-color: #000;
	color: #fff;
	padding: 8px 15px;
	width: 50px
}

#board #score.top {
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 0 0 5px 5px;
}

#board #score.bottom {
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 5px 5px 0 0;
}

#board #score.left {
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 0 5px 5px 0;
}

#board #score.right {
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 5px 0 0 5px;
}

#board #shapeCloneNav {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
	display: inline-block;
	width:  100px;
	height: 100px;
	z-index: 100;
}

#shapeClone svg {
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

/* ALERT */

.alert {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	z-index: 9000;
}

.alert .title {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 5px;
}

.alert .desc {
	font-size: 15px;
}

.alert span {
	display: block;
}

/* UNLOCKABLES */

#achievements.panel .content {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;

}

#cataloguePanel .content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
}

.tile {
	width: 100px;
	height: 100px;
	position: relative;
	padding: 10px;
	border-radius: 5px;
	margin: 10px;
	background-color: #DDD;
}

.tile .name {
	display: none;
	position: absolute;
	z-index: 1000;
	font-weight: bold;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 5px;
	background-color: rgba(221, 221, 221, 0.9);
	padding: 5px;
}

.catalogue.tile .name {
	padding-top: 30px;
}

.achievement.tile .name {
	padding-top: 15px;
	font-size: 15px;
}

.achievement.tile .expl {
	font-weight: normal;
	font-size: 12px;
}

.tile.unlocked:hover .name {
	display: inline-block;
}

.tile svg {
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(0.17);
	transform-origin: 10px 10px;
}

.tile.locked {
	background-color: #ccc;
}

.tile.unlocked {
	background-color: #ddd;
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

.tile.locked svg {
	display: none;
}

/* PLAYGROUND */

#playground {
	margin: 30px auto 20px;
	width:  500px;
	text-align: center;
	position: absolute;
	top: 100px;
	height: 500px;
}

#playground #shapeClone {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -50px;
	margin-top: -50px;
	display: inline-block;
	width:  100px;
	height: 100px;
	transition: transform .5s ease
}

.button #shapeClone {
	position: absolute;
	left: -15px;
	top: -16px;
	display: inline-block;
	transform: scale(0.45);
	background-color: #ddd;
}

.button:hover #shapeClone{
	background-color: #ccc;
}

#tabbar {
	display: flex;
	flex-basis: auto;
	justify-content: space-between;
	width: 100%;
}

#playground .tab {
	display: inline-block;
	border-radius: 10px 10px 0 0;
	height: 55px;
	box-sizing: border-box;
	transition: flex-grow .5s ease;
}

#playground .tab.disabled {
	background-color: #AAA;
	background-image: linear-gradient(to top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%);
	opacity: 0.5;
	flex-grow: 1;
	filter: saturate(10%);
}

#playground .tab.active {
	flex-grow: 2;
	border-bottom: 0px;
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
}

#playground .tab.inactive {
	background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%);
	cursor: url('svg/cursor-pointer.svg'), pointer;
	flex-grow: 1;
}

#playground .tab.inactive:hover {
	height: 65px;
	transform: translateY(-10px);
	margin-bottom: -10px;
	opacity: 1;
	background: none;
}

#playgroundPanel {
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 0 0 5px 5px;
	border-top: 0px;
	overflow-y: scroll;
	background-color: #ccc;
	color: rgb(255, 255, 255);
	padding: 15px;
	box-sizing: border-box;
	position: relative;
}

#playgroundPanel .box {
	margin: 5px;
	border-radius: 5px;
	padding: 10px;
	font-weight: bold;
	position: relative;
	text-align: center;
	background-repeat: no-repeat !important;
}

.box img {
	width: 30px;
	margin-top: 5px;
	margin-bottom: 8px;
	mix-blend-mode: multiply;
	opacity: 0.5;
}

#playgroundPanel.white .box {
	background-color: rgba(50, 50, 50, 0.7) !important;
	background-image: none !important;
}

#playgroundPanel.yellow .box {
	background-color: rgba(150, 90, 50, 0.7) !important;
	background-image: none !important;
}

#playgroundPanel .primary.box {
	height: 100px;
}

#playgroundPanel span {
	display: block;
}

#playgroundPanel .amount {
	font-size: 35px;
}

#playgroundPanel .name {
	margin-top: -5px;
}

#playgroundPanel .power {
	font-weight: normal;
	font-size: 12px;
	margin-top: 3px;
}

#playgroundPanel .content {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

#playgroundPanel .actor.box {
	background-position: bottom !important;
	background-size: 100%;
	flex: 50%;
}

#playgroundPanel .actor .buy {
	width: 100%;
}

#playgroundPanel .actor .text {
	position: absolute;
	width: 100%;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 1);
}

#playgroundPanel .actor .flavor {
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
	opacity: 0.7;
}

#playgroundPanel .buy {
	float: right;
	height: 60px;
	border-radius: 5px;
	color: rgba(255, 255, 255, 0.9);
	padding: 8px;
	font-size: 20px;
	cursor: url('svg/cursor-pointer.svg'), pointer;
	text-align: center;
	display: inline;
}

#playgroundPanel.white .buy,
#playgroundPanel.lightyellow .buy,
#playgroundPanel.lightgreen .buy {
	color: rgba(30, 30, 30, 0.5);
}

#playgroundPanel .buy:hover,
#playgroundPanel .buyFinal:hover {
	opacity: 0.9;
}

#playgroundPanel .buy.disabled {
	opacity: 0.5;
	cursor: url('svg/cursor-default.svg'), default;	
}

#playgroundPanel .price {
	font-size: 13px;
	letter-spacing: -0.4px;
	font-weight: normal;
	pointer-events: none;
}

#playgroundPanel .items {
	display: flex;
	flex-direction: column;
	flex: 50%;
}

#playgroundPanel .secondary.box {
	flex: 50%;
	text-align: left;
}

#playgroundPanel .secondary .buy {
	height: auto;
	width: 95px;
	font-size: 13px;
	margin-bottom: 5px;
}

#playgroundPanel .secondary .hire span {
	display: block;
	width: 15px;
	height: 15px;
	background-color: #ccc;
	float: right;
	margin-left: 5px;
	border-radius: 2px;

}

#playgroundPanel .tertiary.box {
	flex: 50%;
	display: flex;
	flex-direction: column;
	text-align: left;
}

#playgroundPanel .tertiary .buy {
	width: 95px;	
}

#playgroundPanel .head {
	//display: flex;
}

#playgroundPanel .secondary .text ,
#playgroundPanel .tertiary .text {
	margin-bottom:20px;
	float: left;
	display: inline;
}

#playgroundPanel .secondary .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	padding: 10px;
	text-align: center;
}
#playgroundPanel .secondary .overlay .buy {
	float: none;
	width: 130px;
	margin: 0 auto;
	display: block;
	margin-top: 10px;
	white-space: nowrap;
	text-align: center;
}

#playgroundPanel .secondary .overlay .buy::first-child {
	margin-top: 30px;
}

#playgroundPanel .secondary .overlay .close {
	float: right;
	width: 25px;
	height: 25px;
	background-image: url('svg/cross.svg');
	background-repeat: no-repeat;
	background-size: 100%;
	border-radius: 5px;
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

#playgroundPanel .tertiary .buyBox {
	display: flex;
}

#playgroundPanel .tertiary .buyBox .buyFinal {
	color: #fff;
	font-size: 13px;
	flex: 50%;
	margin-right: 10px;
	display: inline-block;
	border-radius: 5px;
	padding: 8px;
	cursor: url('svg/cursor-pointer.svg'), pointer;
	text-align: center;
}

#playgroundPanel .tertiary .buyBox .buyFinal.disabled {
	opacity: 0.5;
	cursor: url('svg/cursor-default.svg'), default;
}

#playgroundPanel .tertiary .buyBox .buyFinal.deactivated,
#playgroundPanel .buy.deactivated {
	opacity: 0.45;
	background-color: #ccc !important;
	color: #fff !important;
	cursor: url('svg/cursor-default.svg'), default;
}

#playgroundPanel .tertiary .buyBox .buyFinal#white-f {
	color: #000;
}

#playgroundPanel .tertiary .buyFinal:last-child {
	margin-right: 0px;
}

#playgroundPanel .final {
	flex-grow: 1;
}

#playgroundPanel #gemBox {
	display: flex;
	justify-content: center;
	margin: 20px 0 30px 0;
}

#playgroundPanel .gem {
	width: 51px;
	height: 51px;
	//margin-left: 5px;
	background-size: 100%;
	background-repeat: no-repeat;
}

#playgroundPanel .gem:first-child{
	margin-left: 0;
}

#playgroundPanel .gem.infused {
	animation: infuse 1s infinite;
}

#playgroundPanel .gem.white.infused {
	animation: infusewhite 1s infinite alternate;
}

#playgroundPanel .final .buy {
	width: 100%;
}

#playgroundPanel .final .buy:last-child {
	margin-top: 10px;
}


#playgroundPanel .desc {
	font-weight: normal;
	font-size: 12px;
	position: absolute;
	width: 90%;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

/* GLOBAL */

#playgroundPanel .game {
	height: 100%;
	padding: 0;
	position: relative;
}

#playgroundPanel .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	background-size: 100%;
	background-repeat: no-repeat;
}

/* ADVENTURE */

#playgroundPanel.adventure .data {
	width: 100%;
	height: 40px;
	padding: 10px;
	border-radius: 5px 5px 0 0;
	position: relative;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: left;
	display: flex;
	justify-content: space-between;
}

#playgroundPanel.adventure .data span {
	display: inline;
	font-size: 15px;
}

#playgroundPanel.adventure .layer {
	display: none;
}

#playgroundPanel.adventure .character {
	background-size: auto;
	background-position: center bottom;
}

#playgroundPanel .input {
	height: 130px;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	padding: 10px;
	margin: 0;
	border-radius: 0 0 5px 5px;
	color: #fff;
	font-size: 15px;
	display: none;
}

#playgroundPanel .input .text span {
	display: none;
}

#playgroundPanel .input .options {
	font-weight: normal;
	margin-top: 15px;
}

#playgroundPanel .input .options .option {
	display: none;
	margin-right: 20px;
	cursor: url('svg/cursor-pointer.svg'), pointer;
	border: 1px solid #fff;
	padding: 5px 7px;
	border-radius: 5px;
	position: relative;
}

#playgroundPanel .input .options .option.disabled {
	opacity: 0.5;
	cursor: url('svg/cursor-default.svg'), default;
}

#playgroundPanel .input .options .option.disabled:hover {
	background-color: transparent;
}

#playgroundPanel .input .options .option .price {
	display: block;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
	white-space: nowrap;
}

#playgroundPanel .input .options .option:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

#playgroundPanel .input .options .option.scene {
	border: 3px double;
}

#playgroundPanel .input .options .option:last-child {
	margin-right: 0;
}

#playgroundPanel .input .path {
	position: absolute;
	bottom: 5px;
	left: 5px;
	font-size: 12px;
	font-weight: normal;
	opacity: 0.2;
}

/* JOURNEY */

#playgroundPanel.journey .data {
	width: 100%;
	height: 40px;
	padding: 10px;
	border-radius: 0 0 5px 5px;
	position: absolute;
	bottom: 0;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: left;
	display: flex;
	justify-content: space-between;
}

#playgroundPanel.journey .data span {
	display: inline;
	font-size: 15px;
}

#playgroundPanel.journey .sky {
	background-image: url('svg/clouds.svg');
	background-position: 0px -460px;
	animation: clouds 10s linear infinite;
}

#playgroundPanel.journey .sky.moving {
	animation: clouds 5s linear infinite;
}

#playgroundPanel.journey .plane {
	background-image: url('svg/plane.svg');
}

@keyframes clouds {
	from {background-position: 0px -460px;}
	to {background-position: 0px 0px;}
}

/* CATS */

#playgroundPanel.cats {
	padding: 10px;
}

#playgroundPanel.cats .data {
	width: 470px;
	height: 42px;
	padding: 10px;
	border-radius: 5px;
	position: absolute;
	bottom: 0;
	margin: 5px;
	background-color: rgba(255, 255, 255, 0.9);
	text-align: left;
	display: flex;
	justify-content: space-between;
}

#playgroundPanel.cats .data span {
	display: inline;
	font-size: 15px;
}

#playgroundPanel.cats .game  {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

#playgroundPanel.cats .cat  {
	background-color: rgba(255, 255, 255, 0.5);
	width: 50px;
	height: 44px;
	border-radius: 5px;
	margin: 5px;
	background-size: 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
}

#playgroundPanel.cats .cat.full {
	cursor: url('svg/cursor-pointer.svg'), pointer;
}

/* CINEMA */

#gameScreen {
	display: none;
	position: absolute;
	width: 1200px;
	height: 600px;
	background-color: rgb(64, 0, 114);
	position: absolute; 
  	left: 0; 
  	right: 0; 
  	margin-left: auto; 
  	margin-right: auto;
  	margin-top: 50px;
  	border-radius: 5px;
  	z-index: 9991;
}

#screenDark {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.9);
	z-index: 9990;
}

/* ENIGMARIUM */

#enigmarium {
	margin: 30px auto 20px;
	width:  500px;
	text-align: center;
	position: absolute;
	top: 100px;
	height: 500px;
}

#enigmarium .tab {
	display: inline-block;
	border-radius: 5px 5px 0 0;
	height: 55px;
	box-sizing: border-box;
	transition: flex-grow .5s ease;
	border: 1px solid #000;
	margin-left: -1px;
	flex-grow: 1;
	background-color: #fff;
	background-position: center;
	background-size: 40%;
	background-repeat: no-repeat;
}

#enigmarium .tab:first-child {
	margin-left: 0px;
}

#enigmarium .tab.active {
	border-bottom: 0px;
}

#enigmarium .tab.inactive {
	cursor: url('svg/cursor-pointer.svg'), pointer;
	flex-grow: 1;
}

#enigmarium .tab.inactive:hover {
	height: 65px;
	transform: translateY(-10px);
	margin-bottom: -10px;
}

#enigmariumPanel {
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 0 0 5px 5px;
	border-top: 0px;
	overflow-y: scroll;
	background-color: #ccc;
	color: rgb(255, 255, 255);
	padding: 15px;
	box-sizing: border-box;
	position: relative;
	border: 1px solid #000;
	border-top: 0px;
	background-color: #fff;
}


/* VIEWPORT */

#viewport {
	display: none;
	width: 242px;
	height: 244px;
	background-color: #eee;	
	position: absolute;
	top: 50px;
	left: 50px;
	cursor: grab;
	border-radius: 5px;
	filter: drop-shadow(0px 5px 6px rgb(0 0 0 / 0.2));

}

#viewport:active {
	cursor: grabbing;
}

#viewport #viewportCanvas {
	transform: scale(2);
	transform-origin: top left;
	width: 100px;
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 5px;
}

#viewport svg {
	cursor: url('svg/cursor-pointer.svg'), pointer;
	transition: transform .5s ease
}

#viewport svg:hover {
	filter: drop-shadow(0px 0px 3px rgb(0 0 0 / 0.2));
}

/*CLONES */

#faviconClone {
	width: 100px;
	height: 100px;
	position: absolute;
	top: -1000px;
	left: -1000px;
}

#copyClone {
	width: 120px;
	height: 120px;
	position: absolute;
	background-color: #ddd;
	top: -1000px;
	left: -1000px;
}

#copyClone svg {
	width: 120px;
	height: 120px;
	position: absolute;
	top: 5px;
	left: 5px;
}

/* ANIMATIONS */

@keyframes hyper {
	0% {filter: hue-rotate(0deg)}
	100% {filter: hue-rotate(45deg)}
}

@keyframes infuse {
	0% {filter: brightness(100%)}
	100% {filter: brightness(500%)}
}

@keyframes infusewhite {
	0% {filter: brightness(100%)}
	100% {filter: brightness(-100%)}
}

@keyframes move-right {
	from {background-position: 24px;}
	to {background-position: 0px;}
}

@keyframes move-left {
	from {background-position: 0px;}
	to {background-position: 24px;}
}

@keyframes move-top {
	from {background-position: 0px 0px;}
	to {background-position: 0px 24px;}
}

@keyframes move-bottom {
	from {background-position: 0px 24px;}
	to {background-position: 0px 0px;}
}

@keyframes move-bottomright {
	from {background-position: 24px 24px;}
	to {background-position: 0px 0px;}
}

@keyframes move-topleft {
	from {background-position: 0px 0px;}
	to {background-position: 24px 24px;}
}

@keyframes move-topright {
	from {background-position: 24px 0px;}
	to {background-position: 0px 24px;}
}

@keyframes move-bottomleft {
	from {background-position: 0px 24px;}
	to {background-position: 24px 0px;}
}

@keyframes trinket-top {
	from {transform: translateX(250px) translateY(20px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-bottom {
	from {transform: translateX(250px) translateY(480px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-left {
	from {transform: translateX(20px) translateY(250px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-right {
	from {transform: translateX(480px) translateY(250px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-topleft {
	from {transform: translateX(20px) translateY(20px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-topright {
	from {transform: translateX(480px) translateY(20px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-bottomleft {
	from {transform: translateX(20px) translateY(480px);}
    to {transform: translateX(250px) translateY(250px);}
}
@keyframes trinket-bottomright {
	from {transform: translateX(480px) translateY(480px);}
    to {transform: translateX(250px) translateY(250px);}
}