@charset "UTF-8";
@namespace url("http://www.w3.org/1999/xhtml");

body {
	margin: unset;
	--margin: 1em;
}

h1 {
	display: none;
}

body > * {
	margin: var(--margin);
}

main {
	--first-sheet-height: 1400px;
	width: calc(1600px + var(--margin));
	height: calc(var(--first-sheet-height) + var(--margin) + 800px);
	background:
		url("checksheet.jpg") top left no-repeat,
		url("checksheet-quest.jpg") bottom left no-repeat;
	position: relative;

	--column: 8.68em;
	--row: 9.22em;
}

main > dl {
	margin: unset;
	position: absolute;
	top: 11.5em;
	left: 19em;
	right: 0;
}

main > dl > dd > ul {
	display: flex;
}

main > dl > dd > ul > li {
	width: var(--column);
	height: var(--row);
	display: flex;
	justify-content: center;
	align-items: center;
}

main label {
	color: transparent;
	display: block;
	width: 7em;
	height: 7em;
	border-radius: 50%;
	border: solid 1em transparent;
	box-sizing: border-box;
	cursor: pointer;
}

main label:hover {
	border-color: #FFAAAAAA;
}

main :checked + label {
	background: url("stamp1.png") center/contain no-repeat border-box;
	border-color: transparent;
}

dd {
	margin-left: unset;
}

ul {
	padding-left: unset;
	margin: unset; /* Google Chrome */
}

main > dl > dt,
main input {
	display: none;
}

[data-location="Entrance"] {
	position: absolute;
	left: calc(var(--column) * 8);
}

[data-location="Entrance"] label {
	display: flex;
	color: #BBBBBB;
	font-weight: bold;
	justify-content: center;
	align-items: center;
}

[data-location="Entrance"] :not(:hover):not(:checked) + label {
	border-color: #BBBBBB;
}

dd[data-group="MIYABI"] ul {
	position: absolute;
	top: calc(var(--row) * 7);
	left: calc(var(--column) * 5);
}

dd[data-group="MIYABI"] label::after {
	/* Quest */
	content: "";
	display: block;
	position: absolute;
	width: 8em;
	height: 8em;
	top: calc(var(--margin) + 48em);
	left: -40em;
	border: inherit;
	border-radius: inherit;
}

dd[data-group="MIYABI"] :checked + label::after {
	/* Quest */
	background: url("stamp2.png") center/contain no-repeat border-box;
}

dd[data-group="Quest"] ul {
	position: absolute;
	top: calc(var(--first-sheet-height) + var(--margin) + 1em);
	left: 3.5em;
	--row: 11.5em;
	--column: 12em;
	--right-panel-left: 50em;
	--right-panel-top: 6.5em;
	--right-panel-row: 12em;
}

dd[data-group="Quest"] li {
	position: absolute;
	width: 10em;
	height: 10em;
}

dd[data-group="Quest"] label {
	width: 100%;
	height: 100%;
}

dd[data-group="Quest"] :checked + label {
	background-image: url("stamp2.png");
}

[data-location="Kowloon Empire Sanban Boulevard 1"] {
	top: var(--row);
}

[data-location="Kowloon Empire Sanban Boulevard 2"] {
	top: var(--row);
	left: var(--column);
}

[data-location="Pretty Pop Party - Pastel 1"] {
	top: calc(var(--right-panel-top));
	left: var(--right-panel-left);
}

[data-location="Pretty Pop Party - Pastel 2"] {
	top: calc(var(--right-panel-top));
	left: calc(var(--right-panel-left) + var(--column));
}

[data-location="Pretty Pop Party - Vivid 1"] {
	top: calc(var(--right-panel-top) + var(--right-panel-row));
	left: var(--right-panel-left);
}

[data-location="Pretty Pop Party - Vivid 2"] {
	top: calc(var(--right-panel-top) + var(--right-panel-row));
	left: calc(var(--right-panel-left) + var(--column));
}