/*
 * SmartEdu Nástroje — Náhodný žiak (koleso).
 * Farby dielikov sú zosvetlené farby palety, text na nich je tmavý (kontrast AA).
 */

.se-koleso {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.5rem 2.5rem;
	align-items: center;
}

@container ( min-width: 50rem ) {
	.se-koleso {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 17rem, 1fr );
	}
}

.se-koleso-obal {
	position: relative;
	width: min( 100%, 70vh );
	margin: 0 auto;
	aspect-ratio: 1;
	cursor: pointer;
}

.se-koleso-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	border-radius: 50%;
	box-shadow: 0 12px 32px -12px rgba( 15, 23, 42, 0.4 );
	transform-origin: 50% 50%;
}

.se-koleso-dielik {
	stroke: var( --wp--preset--color--podklad, #fff );
	stroke-width: 1;
}

.se-koleso-dielik--0 {
	fill: color-mix( in srgb, var( --wp--preset--color--primarna, #1d4ed8 ) 24%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--1 {
	fill: color-mix( in srgb, var( --wp--preset--color--akcent, #06b6d4 ) 32%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--2 {
	fill: color-mix( in srgb, var( --wp--preset--color--uspech, #15803d ) 24%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--3 {
	fill: color-mix( in srgb, var( --wp--preset--color--pozor, #b45309 ) 26%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--4 {
	fill: color-mix( in srgb, var( --wp--preset--color--chyba, #dc2626 ) 20%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--5 {
	fill: color-mix( in srgb, var( --wp--preset--color--primarna-tmava, #1e3a8a ) 16%, var( --wp--preset--color--podklad, #fff ) );
}

.se-koleso-dielik--prazdne {
	fill: var( --se-jemny );
}

.se-koleso-meno {
	fill: var( --wp--preset--color--text, #0f172a );
	font-family: inherit;
	font-weight: 700;
}

.se-koleso-ukazovatel {
	position: absolute;
	top: -3.5%;
	left: 50%;
	width: 6.5%;
	overflow: visible;
	transform: translateX( -50% );
	fill: var( --wp--preset--color--text, #0f172a );
	stroke: var( --wp--preset--color--podklad, #fff );
	stroke-width: 2;
	stroke-linejoin: round;
}

.se-koleso-stred {
	position: absolute;
	inset: 45%;
	border: 0.3em solid var( --wp--preset--color--text, #0f172a );
	border-radius: 50%;
	background: var( --wp--preset--color--podklad, #fff );
}

.se-koleso-strana {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.se-koleso-strana > p,
.se-koleso-pult > p {
	margin: 0;
}

/* Pult pod kolesom: možnosť, vrátenie žiakov a nápoveda. */
.se-koleso-pult {
	display: grid;
	gap: 0.5rem;
}

.se-koleso-vyber {
	min-height: 6.5em;
	padding: 1rem 1.25rem;
	border-radius: 16px;
	background: var( --se-jemny );
}

.se-koleso-popis {
	margin: 0;
	color: var( --wp--preset--color--text-jemny, #475569 );
	font-weight: 600;
}

.se-koleso-vysledok {
	min-height: 1.1em;
	margin: 0.15em 0 0;
	font-size: clamp( 2.25em, 7cqi, 4.5em );
	font-weight: 800;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.se-koleso-prazdne {
	color: var( --se-pozor );
	font-weight: 700;
}

.se-koleso-tocit {
	width: 100%;
	font-size: 1.35em;
}

.se-koleso-moznost {
	display: flex;
	gap: 0.6em;
	align-items: center;
	min-height: 44px;
}

.se-koleso-moznost input {
	flex: none;
	width: 1.4em;
	height: 1.4em;
	margin: 0;
	accent-color: var( --se-hlavna );
}

.se-koleso-posledni h3 {
	margin: 0 0 0.4rem;
	font-size: 1em;
}

.se-koleso-historia {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.se-koleso-historia li {
	padding: 0.15em 0.7em;
	border: 1px solid var( --se-okraj );
	border-radius: 999px;
}

.se-koleso-historia li:first-child {
	border-color: currentColor;
	font-weight: 700;
}