#ripcrypt-delve-dice {
	display: grid;
	grid-template-columns: max-content 2rem 90px 2rem 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 */
		}
	}

	#the-hourglass,
	#delve-difficulty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		position: relative;

		.icon-container {
			position: absolute;
			width: 34px;
			display: grid;
			padding: 4px 0;
			background: var(--accent-1);
			border-radius: 8px;

			> * {
				grid-row: 1 / -1;
				grid-column: 1 / -1;
			}

			span {
				font-size: 1.25rem;
				z-index: 2;
				align-self: center;
				justify-self: center;
			}

			rc-svg {
				inset: 4px;
			}
		}
	}
}