body {
	overflow: hidden;
	height: 100svh;
	width: 100svw;
}

/*----------------------*/
/*POSTER*/
/*----------------------*/
#posterWrap {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-rows: 1fr auto;
}

#poster {
	position: relative;
	width: 100%;
	height: 100%;
	background: #0b0b0b;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

#touchZoneWrap {
	position: absolute;
	inset: 0;
	pointer-events: auto;
}

#touchZoneStage {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	pointer-events: auto;
	transition: none !important;
	will-change: transform;
}

svg.touchZoneSvg {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

svg.touchZoneSvg [data-partid] {
	pointer-events: auto;
	cursor: pointer;
	fill: rgba(255, 180, 0, 0.1);
	stroke: rgba(255, 180, 0, 0.55);
	stroke-width: 5;
	vector-effect: non-scaling-stroke;
	opacity: 0;
}

svg.touchZoneSvg [data-partid]:active {
	opacity: 1;
}

@media (hover: hover) {
	svg.touchZoneSvg [data-partid]:hover {
		opacity: 1 !important;
	}
}

/*----------------------*/
/*Me*/
/*----------------------*/
#mydata .full-popup {
	max-width: max-content;
	background-color: var(--color-bk);
}

#mydata h4 {
	text-align: left;
}

#mydata h4 span {
	font-size: var(--fs-xs);
	display: block;
	font-weight: normal;
	line-height: 2.75em;
}

#mydata dl {
	max-width: 350px;
	margin-bottom: 1.5em;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 1.25em 0.5em;
	align-items: center;
}

#mydata dl * {
	width: 100%;
}

#mydata dl dt {
	grid-column: 1;
	font-size: var(--fs-s);
}

#mydata dl dd {
	grid-column: 2;
}

#mydata dl input {
	font-size: var(--fs-s);
	border: none;
	color: var(--tcolor-w);
}

#confirmMydata:disabled {
	opacity: .2;
	pointer-events: none;
}

#mydata dl input:not([type='file']) {
	padding: 0.75em 0;
	background: var(--color-bk);
	border-bottom: 1px solid white;
}

#mydata dl input::file-selector-button {
	color: var(--tcolor-w);
	border: 0;
	padding: 0.5em 0.5em;
	border-radius: 4px;
	text-align: center;
	border: 1px solid var(--lcolor-w);
	background-color: black;
}

#mydata .full-popup > div {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#mydata .text-btn {
	padding: 0.75em 1em;
}

/*overlay*/
#isme {
	width: 8.678%;
	aspect-ratio: 521/184;
	position: absolute;
	left: 49.3%;
	top: 30.2%;
	color: white;
	pointer-events: none;
	z-index: -1;
	background: url(/source/uchuzu2024_people.webp) no-repeat center/contain;
	opacity: 0;
}

#isme.show,
#isme:not(:has(#mybirth:empty)) {
	opacity: 1;
}

#isme:has(#mybirth:empty) {
	background-image: url(/source/uchuzu2024_peoplebk.webp);
}

#isme .people {
	display: block;
	position: relative;
	left: 0.3%;
	top: 2%;
	width: 6%;
	aspect-ratio: 102/329.43;
	background: url(/source/icons/people.svg) no-repeat center/contain;
}

#isme:has(#mybirth:empty).show .people {
	animation: 2s ease infinite jump;
}

#isme .people:has(img:not([src=''])) {
	transform: scale(1.2);
}

@keyframes jump {

	0%,
	10% {
		transform: translateY(0%);
	}

	20% {
		transform: translateY(-3%) scale(1.02);
	}

	30% {
		transform: translateY(0%);
	}

	40% {
		transform: translateY(-3%) scale(1.02);
	}

	50%,
	100% {
		transform: translateY(0%);
	}
}

#touchZoneWrap:not(:has(#isme.show)) #touchZone .people {
	pointer-events: none;
}

#isme > *:not(div) {
	position: absolute;
	white-space: nowrap;
}

#mybirth {
	left: 16%;
	top: 42%;
	font-family: serif;
	font-size: 120%;
}

#myface {
	--m: url(/source/icons/face.svg);
	--s: 56%;
	--s: 110%;
	width: var(--s);
	aspect-ratio: 1/1.1;
	position: absolute;
	top: 0%;
	left: 22%;
	
	top: -15%;
	left: -5%;
	border-radius: 20px;
	background-color: var(--color-bk);
	border: 0.8px solid black;
	object-fit: cover;
	-webkit-mask-image: var(--m);
	mask-image: var(--m);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;

}

#myface[src=''] {
	display: none;
}

@media only screen and (max-width: 768px) {

	.control-panel {
		flex-direction: row;
		bottom: var(--corner);
		right: 50% !important;
		transform: translateX(50%);
	}

	#posterControl hr {
		width: 1px;
		height: calc(var(--icon-tool) + 6px);
	}

	#posterControl .btn-text {
		display: none;
	}

}