@charset "utf-8";
@font-face {
	font-family: "EngraversRoman";
	src: url("../fonts/OPTIEngraversRoman-No2.otf") format("opentype");
}

.container-dies {
	& [data-die] {
		--color-background: Black;
		--width-border: 0;

		filter: invert(100%);
	}
}
.box-number,
.come,
.container-any-craps,
.container-any-seven,
.container-box-numbers,
.container-field,
.container-field-2-12,
.dont-come,
.dont-come-bet,
.dont-pass,
.hard-way,
.horn,
.label-horn,
.pass-line {
	align-items: center;
	display: flex;
	justify-content: center;
}
.box-number,
.come {
	font-size: var(--em-xl);
}
.box-number,
.dont-come {
	block-size: 100%;
}
.box-number,
.dont-come,
.hard-way,
.horn,
.pass-line {
	background-color: var(--color-bgnd-shade1);
}
.box-number,
.come,
.container-any-craps,
.container-any-seven,
.container-field,
.dont-come,
.dont-come-bet,
.dont-pass,
.hard-way,
.horn,
.label-horn,
.pass-line {
	padding: var(--rem-xs);
}
.field-2-12-circle {
	align-items: center;
	aspect-ratio: 1 / 1;
	block-size: 2.25em;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	outline: var(--em-3xs) solid currentColor;
	outline-offset: -0.25em;
}
.come {
	background-color: var(--color-bgnd-tint2);
}
.container-any-craps,
.container-any-seven,
.container-field,
.dont-come-bet,
.dont-pass,
.label-horn {
	background-color: var(--color-bgnd-shade4);
}
.container-any-craps,
.container-any-seven,
.dont-pass {
	align-items: baseline;
}
.container-any-craps {
	order: 1;
}
.container-box-numbers,
.container-hard-ways,
.container-horns {
	display: grid;
}
.container-box-numbers,
.container-hard-ways,
.container-horns {
	background-color: currentColor;
	gap: var(--width-border);
}
.container-box-numbers {
	grid-template-columns: repeat(7, 1fr);
}
.container-hard-ways,
.container-horns {
	grid-template-columns: repeat(2, 1fr);
}
.container-horns {
	position: relative;

	& > :nth-child(odd):not(.label-horn) {
		padding-inline-end: 2.5em;
	}
	& > :nth-child(even) {
		padding-inline-start: 2.5em;
	}
}
.container-non-props,
.container-props {
	background-color: currentColor;
	border: var(--width-border) solid currentColor;
	color: White;
	display: flex;
	flex-direction: column;
	font-family: "EngraversRoman";
	gap: var(--width-border);
	inline-size: fit-content;
}
.dont-come,
.label-any-craps,
.label-any-seven,
.label-minor {
	text-align: center;
}
.dont-come {
	grid-row: span 2;
}
.hard-way,
.horn {
	--size-die: 1.25em;
}
.label-any-craps,
.label-any-seven {
	color: var(--color-accent1-shade2);
}
.label-field-2-12 {
	font-size: 0.5em;
}
.label-field {
	font-size: var(--em-lg);
}
.label-horn {
	block-size: 50%;
	border: var(--width-border) solid currentColor;
	border-radius: 0.5em;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}
.label-minor {
	font-size: 0.65em;
	text-wrap: nowrap;
}

@media (width >= 482 px) {
	.container-props {
		display: grid;
		grid-template-columns: repeat(2, 1fr);

		& .container-any-craps {
			order: initial;
		}
	}
}