#ripcrypt-delve-dice {
	display: grid;
	grid-template-columns: max-content 1fr 1fr 1fr max-content;
	gap: 8px;
	padding: 4px 1.5rem;
	background: var(--DelveDice-background);
	align-items: center;
	justify-items: center;
	pointer-events: all;

	border-radius: 0 0 999px 999px;

	button {
		&:hover {
			cursor: pointer;
		}
	}

	#fate-compass {
		width: 100%;
		height: 100%;
		overflow: visible;
		position: relative;

		.compass-container {
			position: absolute;
			background: var(--DelveDice-background);
			border-radius: 0 0 999px 999px;
			padding: 4px;
			width: 100%;
		}

		.compass {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(3, minmax(0, 1fr));
			grid-template-areas:
				". N ."
				"W A E"
				". S .";
			align-items: center;
			justify-items: center;
			background: var(--accent-2);
			border-radius: 999px;
			aspect-ratio: 1;
		}

		.compass-pointer {
			grid-area: A;
			transition: 500ms transform;
			transform: rotate(-90deg); /* North by default */
		}
	}
}