/*
 * SmartEdu Nástroje — Kocka.
 * Veľkosť kociek sa riadi šírkou plochy (cqi) — na projektore sú obrovské.
 */

.se-kocka-obal {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.25rem;
	justify-items: center;
	text-align: center;
}

.se-kocka-nastavenie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: flex-end;
	justify-content: center;
}

.se-kocka-skupina {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: flex-start;
}

.se-kocka-skupina > span {
	font-weight: 600;
}

.se-kocka-rozsah {
	display: flex;
	gap: 0.75rem;
}

.se-kocka-rozsah p {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	text-align: left;
}

.se-kocky {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 1rem, 4cqi, 3rem );
	justify-content: center;
	margin: 1rem 0;
	cursor: pointer;
}

.se-kocka {
	display: grid;
	grid-template: repeat( 3, 1fr ) / repeat( 3, 1fr );
	place-items: center;
	width: clamp( 7rem, 24cqi, 15rem );
	aspect-ratio: 1;
	padding: 12%;
	border: 4px solid var( --wp--preset--color--text, #0f172a );
	border-radius: 18%;
	background: var( --wp--preset--color--podklad, #fff );
	box-shadow: 0 10px 24px -12px rgba( 15, 23, 42, 0.45 );
}

.se-kocka-bodka {
	width: 72%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var( --wp--preset--color--text, #0f172a );
	visibility: hidden;
}

.se-kocka-bodka.je-viditelna {
	visibility: visible;
}

/* Vlastný rozsah a kocka pred prvým hodom: číslo namiesto bodiek. */
.se-kocka--cislo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: clamp( 7rem, 24cqi, 15rem );
	height: clamp( 7rem, 24cqi, 15rem );
	aspect-ratio: auto;
	padding: 0 0.3em;
	font-size: clamp( 3rem, 11cqi, 7rem );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.se-kocky.je-hadze .se-kocka {
	animation: se-kocka-tras 150ms ease-in-out infinite alternate;
}

@keyframes se-kocka-tras {
	from {
		transform: rotate( -8deg ) translateY( -3% );
	}

	to {
		transform: rotate( 8deg ) translateY( 3% );
	}
}

.se-kocka-sucet {
	min-height: 1.3em;
	margin: 0;
	font-size: clamp( 1.5em, 5cqi, 3em );
	font-weight: 800;
}

.se-kocka-akcia {
	margin: 0;
}

.se-kocka-hodit {
	min-width: 10em;
	font-size: 1.35em;
}

.se-kocka-historia {
	min-height: 1.4em;
	margin: 0;
	color: var( --wp--preset--color--text-jemny, #475569 );
	font-variant-numeric: tabular-nums;
}