@charset "utf-8";
/*=============================================================================
 * HTML elements.
 */

/* Hand filters. */
.form-filters-col:has(input[type="checkbox"][value="come-out"]:not(:checked)) {
	& ~ .container-session [data-legend-key="C"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="loss"]:not(:checked)) {
	& ~ .container-session [data-legend-key="L"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="win"]:not(:checked)) {
	& ~ .container-session [data-legend-key="W"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="unfinished"]:not(:checked)) {
	& ~ .container-session [data-legend-key="U"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
/* End hand filters. */

/* Turn filters. */
.form-filters-col:has(input[type="checkbox"][value="decade-1"]:not(:checked)) {
	& ~ .container-session [data-decade="1"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-2"]:not(:checked)) {
	& ~ .container-session [data-decade="2"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-3"]:not(:checked)) {
	& ~ .container-session [data-decade="3"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-4"]:not(:checked)) {
	& ~ .container-session [data-decade="4"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-5"]:not(:checked)) {
	& ~ .container-session [data-decade="5"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-6"]:not(:checked)) {
	& ~ .container-session [data-decade="6"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-7"]:not(:checked)) {
	& ~ .container-session [data-decade="7"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-8"]:not(:checked)) {
	& ~ .container-session [data-decade="8"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
.form-filters-col:has(input[type="checkbox"][value="decade-9"]:not(:checked)) {
	& ~ .container-session [data-decade="9"] {
		animation: flex-fade-out 0.5s;
		display: none;
	}
}
/* End turn filters. */

/* Legend only. */
li[data-legend-key] {
	&[data-legend-key="#"] {
		--color-background: var(--color-accent3-shade4);
	}
	&[data-legend-key="-"] {
		--color-background: var(--color-accent4);
	}
	&[data-legend-key="C"] {
		--color-background: var(--color-accent3-shade4);
	}
	&[data-legend-key="L"] {
		--color-background: var(--color-accent1-shade4);
	}
	&[data-legend-key="U"] {
		--color-background: var(--color-gray-shade4);

		&::before {
			border-color: var(--color-gray-tint4);
			border-style: dotted;
		}
	}
	&[data-legend-key="W"] {
		--color-background: var(--color-accent2-shade4);
	}
}
/* End legend only. */

li[data-legend-key] {
	&[data-legend-key="7"] {
		--color-background: var(--color-accent1-tint4);
	}
	&[data-legend-key="B"] {
		--color-background: var(--color-accent2-tint4);
	}
	&[data-legend-key="H"] {
		--color-background: var(--color-gray-tint4);
	}
	&[data-legend-key="HW"] {
		--color-background: var(--color-accent2-tint2);
	}
}

/*=============================================================================
 * HTML element attributes.
 */
[data-die] {
	--width-border: var(--em-2xs);
	--_color-background: var(--color-background, Red);
	--_radius-border: var(--radius-border, calc(1em / 8));
	--_size-die: var(--size-die, var(--em-md));
	--_width-border: var(--width-border);

	aspect-ratio: 1 / 1;
	background-clip: padding-box;
	background-color: var(--_color-background);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	block-size: var(--_size-die);
	border-radius: var(--_radius-border);
	border: var(--_width-border) solid currentColor;
	display: inline-block;
	inline-size: var(--_size-die);

	&[data-die="1"] {
		background-image: url('../images/die-1.svg');
	}
	&[data-die="2"] {
		background-image: url('../images/die-2.svg');

		&.rotate {
			background-image: url('../images/die-2-rotated.svg');
		}
	}
	&[data-die="3"] {
		background-image: url('../images/die-3.svg');

		&.rotate {
			background-image: url('../images/die-3-rotated.svg');
		}
	}
	&[data-die="4"] {
		background-image: url('../images/die-4.svg');
	}
	&[data-die="5"] {
		background-image: url('../images/die-5.svg');
	}
	&[data-die="6"] {
		background-image: url('../images/die-6.svg');

		&.rotate {
			background-image: url('../images/die-6-rotated.svg');
		}
	}
}

/*=============================================================================
 * CSS classes.
 */
.container-dies {
	--_size-die: var(--size-die, var(--em-md));

	align-items: center;
	display: flex;
	flex: 1;
	gap: calc(var(--_size-die) / 4);
	justify-content: center;
	list-style-type: none;
}
.container-roll,
.container-rolls-info {
  background-color: var(--_color-background);
	border: var(--em-2xs) solid var(--color-border, currentColor);
  display: flex;
  flex-direction: column;
  min-inline-size: var(--width-items);
}
.container-roll {
	--_color-background: var(--color-background, White);

	aspect-ratio: 1 / 1;
	inline-size: var(--width-items);

	&[data-sum="2"],
	&[data-sum="3"],
	&[data-sum="11"],
	&[data-sum="12"] {
		& > :last-child {
			--_color-background: var(--color-gray-tint4);
		}
	}
	&[data-sum="4"],
	&[data-sum="5"],
	&[data-sum="6"],
	&[data-sum="8"],
	&[data-sum="9"],
	&[data-sum="10"] {
		& > :last-child {
			--_color-background: var(--color-accent2-tint4);
		}
	}
	&[data-sum="7"] {
		& > :last-child {
			--_color-background: var(--color-accent1-tint4);
		}
	}

	& > :last-child {
		align-items: center;
		background-color: var(--_color-background);
		display: flex;
		flex: 1;
		justify-content: center;
	}

	&.come-out {
		--_color-background: var(--color-accent3-tint4);

		& > :last-child {
			background-color: inherit;
		}
	}
	&.hard-way {
		& > :last-child {
			--_color-background: var(--color-accent2-tint2);
		}
	}
	&.transition,
	&.winner {
		& > :last-child {
			font-weight: bold;
		}
	}
	&.winner {
		& > :last-child {
			color: blue;
		}
	}
}
.container-rolls,
.container-rolls-info {
	animation: flex-fade-in 1s;
}
.container-rolls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--em-xs);
}
.container-rolls-info {
	padding: var(--em-2xs) var(--em-xs) var(--em-xs);

	&[data-legend-key="#"] {
		--_color-background: var(--color-accent3-shade4);
	}
	&[data-legend-key="C"] {
		--_color-background: var(--color-accent3-shade4);
	}
	&[data-legend-key="L"] {
		--_color-background: var(--color-accent1-shade4);
	}
	&[data-legend-key="U"] {
		--color-border: LightGray;
		--_color-background: var(--color-gray-shade4);

		border-color: var(--color-gray-tint4);
		border-style: dotted;

		& > :last-child {
			background-color: var(--color-gray-tint4);
		}
	}
	&[data-legend-key="W"] {
		--_color-background: var(--color-accent2-shade4);
	}

	& > * {
		display: flex;
		justify-content: center;
	}
	& > :first-child {
		color: White;
		flex: 1;
		font-weight: bold;
	}
	& > :last-child {
		background-color: Yellow;
		border-radius: var(--em-md);
		box-shadow: inset var(--box-shadow);
	}
}
.container-session {
	--width-items: 5.5ch;

	display: grid;
	gap: var(--em-sm);
	grid-template-columns: auto 1fr;
	margin-block: var(--rem-md);

	&:last-child {
		margin-block-end: 0;
	}
}
.form-filters-col,
.roll-filter {
	margin-block: var(--rem-sm);

	& > * {
		display: flex;
	}
}
.form-filters-col {
	display: flex;
	flex-direction: column;
}
.roll-filter {
	display: grid;
	column-gap: var(--em-md);
	grid-template-columns: repeat(auto-fit, 4ch);

	&:has(input[type="checkbox"][value="2"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="2"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="3"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="3"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="4"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="4"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="5"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="5"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="6"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="6"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="7"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="7"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="8"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="8"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="9"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="9"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="10"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="10"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="11"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="11"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
	&:has(input[type="checkbox"][value="12"]:not(:checked)) {
		& ~ .container-session .container-roll[data-sum="12"] {
			background-color: var(--color-gray-tint4);
			border-color: var(--color-gray);
			border-style: dotted;

			& :first-child {
				visibility: hidden;
			}
			& :last-child {
				--_color-background: transparent;

				color: var(--color-gray);
			}
		}
	}
}

@media (prefers-color-scheme: dark) {
	.container-session {
		& .come-out [data-die] {
			border-color: Black;
		}
	}
	.container-roll {
		--_color-background: var(--color-dark-mode-bgnd);

		color: var(--color-dark-mode-text);

		& > :last-child {
			color: Canvas;
		}
	}
	.container-rolls-info {
		& > :last-child {
			color: Canvas;
		}
	}
}

/*=============================================================================
 * For probabilities.php.
 */
.container-dice-combo-grid {
	--size-die: var(--em-xl);
	--_size-items: var(--size-die);

	display: grid;
	gap: var(--em-sm);
	grid-template-columns: var(--_size-items) repeat(6, var(--_size-items));
	overflow-x: auto;

	& [data-die] {
		--color-background: DodgerBlue;
	}

	& :is(
		.any-seven,
		.box-number,
		.horn
	) {
		--_color-background: var(--color-background, inherit);
	
		aspect-ratio: 1 / 1;
		align-items: center;
		background-color: var(--_color-background);
		border: var(--em-2xs) solid CanvasText;
		color: Black;
		display: flex;
		inline-size: var(--_size-die);
		justify-content: center;
	}
	& .any-seven {
		--color-background: var(--color-accent1-tint2);
	}
	& .box-number {
		--color-background: var(--color-accent2-tint2);
	}
	& .horn {
		--color-background: var(--color-gray-tint4);
	}
	& .hard-way {
		--color-background: var(--color-accent2);
	}
	& .double {
		--color-background: var(--color-gray-tint2);
	}
	& .triple {
		--color-background: var(--color-gray);
	}
}
.container-dice-combo-pairs {
	--size-die: calc(var(--em-md) * 1.25);

	align-items: end;
	display: flex;
	gap: var(--em-sm);
	margin-block: var(--rem-md);
	overflow-x: auto;

	& [data-die] {
		--color-background: DodgerBlue;
	}
	& .container-dies {
		--_color-background: var(--color-background, inherit);

		background-color: var(--_color-background);
		padding: var(--em-xs);
	}
	& .dice-combos-column {
		--_color-background: var(--color-background, inherit);
		--_padding: var(--padding, var(--em-xs));

		align-items: center;
		background-color: var(--_color-background);
		display: flex;
		flex-direction: column;
		min-inline-size: fit-content;
		padding-block: var(--em-xs);

	}
	& .any-seven {
		--color-background: var(--color-accent1-tint2);
	}
	& .box-number {
		--color-background: var(--color-accent2-tint2);
	}
	& .horn {
		--color-background: var(--color-gray-tint4);
	}
	& .hard-way {
		--color-background: var(--color-accent2);
	}
	& .double {
		--color-background: var(--color-gray-tint2);
	}
	& .triple {
		--color-background: var(--color-gray);
	}
}
.container-pay-table {
	& [data-die] {
		--color-background: DodgerBlue;
	}
	& th {
		--color-background: var(--color-accent3-tint4);
		--color-text: var(--color-accent3-shade5);
	}

	& .container-dies {
		padding: 0;
	}
	& .any-seven {
		--color-background: var(--color-accent1-tint2);
	}
	& .box-number {
		--color-background: var(--color-accent2-tint2);
	}
	& .horn {
		--color-background: var(--color-gray-tint4);
	}
	& .hard-way {
		--color-background: var(--color-accent2);
	}
	& .double {
		--color-background: var(--color-gray-tint2);
	}
	& .triple {
		--color-background: var(--color-gray);
	}
}
.dice-combos {
	gap: var(--rem-md) var(--rem-xl);

	& table {
		& tbody td:first-child {
			background-color: LightCyan;
		}
	}
}

@media (prefers-color-scheme: dark) {
	.dice-combos {
		& table {
			--color-background: var(--color-dark-mode-bgnd);

			color: var(--color-dark-mode-text);

			& tbody td:first-child {
				background-color: #333;
			}
			& tbody td {
				--color-background: var(--color-dark-mode-bgnd);
			}
			& :is(
				td,
				th
			) {
				border-color: CanvasText;
			}
		}
	}
	.container-dice-combo-pairs {
		color: Black;
	}
	.container-pay-table {
		--color-background: var(--color-dark-mode-bgnd);

		color: var(--color-dark-mode-text);

		& tbody td:first-child {
			border-color: CanvasText;
			color: Black;
		}
		& tbody td {
			--color-background: var(--color-dark-mode-bgnd);
		}
	}
}